Обтекание элементов HTML при увеличении / уменьшении - PullRequest
Новая
       3

Обтекание элементов HTML при увеличении / уменьшении

1 голос
/ 29 марта 2012

У меня есть список имен экранов, которые можно отфильтровать по буквам.Проблема, с которой я столкнулся, заключается в том, что когда окно браузера уменьшается в пределах 1-5 уровней, z переходит на следующую строку в Firefox, а несколько букв - в Chrome.Уменьшенные 5 уровней, кажется, в IE нормально.Вот пример источника: 

<html>
<head>
    <style>
    .filters { position: absolute; background: #ff0000 0 0 no-repeat; width: 970px; height: 31px; left: 0; text-transform: uppercase; }
    .letters { float: left; margin: 2px 0 0 7px; width: 710px; height: 30px; background-color: orange;  }
    .screenname {width: 244px; background-color: green; float: left; }
    .filters .letters a { display: inline; margin: 0 14px 0 0; }
    .filters .letters a.disabled { color: #36373a; cursor: default; }
    .filters a { font: bold italic 12px/28px Arial, sans-serif; }
    </style>
</head>
<body>
    <div class="filters">
        <div class="screenname">
            Screen Name
        </div>
        <div class="letters">
            <a href="#" rel="#">#</a>
            <a href="#" rel="A">A</a>
            <a href="#" rel="B">B</a>
            <a href="#" rel="C">C</a>
            <a href="#" rel="D">D</a>
            <a href="#" rel="E">E</a>
            <a href="#" rel="F">F</a>
            <a href="#" rel="G">G</a>
            <a href="#" rel="H">H</a>
            <a href="#" rel="I">I</a>
            <a href="#" rel="J">J</a>
            <a href="#" rel="K">K</a>
            <a href="#" rel="L">L</a>
            <a href="#" rel="M">M</a>
            <a href="#" rel="N">N</a>
            <a href="#" rel="O">O</a>
            <a href="#" rel="P">P</a>
            <a href="#" rel="Q">Q</a>
            <a href="#" rel="R">R</a>
            <a href="#" rel="S">S</a>
            <a href="#" rel="T">T</a>
            <a href="#" rel="U">U</a>
            <a href="#" rel="V">V</a>
            <a href="#" rel="W">W</a>
            <a href="#" rel="X">X</a>
            <a href="#" rel="Y">Y</a>
            <a href="#" rel="Z">Z</a>
        </div>
    </div>
</body>

Теперь поместите это в файл HTML и уменьшите (Ctrl-) пять раз как в Chrome, так и в Firefox.Вы увидите, что упаковка происходит.Как я могу избежать этого?Я не могу увеличить размер фильтра фильтров, и я вижу, что проблема может быть частично вызвана рендерингом шрифтов в Chrome (он перестает уменьшаться в размере после определенного количества масштабов).Я открыт для любых хаков javascript / Jquery, которые также могут работать.

1 Ответ

0 голосов
/ 29 марта 2012

Единственная упаковка, которую я получаю, это то, что Z переходит на новую строку с небольшим увеличением масштаба в Firefox. Мне кажется, что Chrome и IE работают нормально.

Что-то, что вы можете сделать, это увеличить ширину класса .letters.

Что бы я мог сделать, чтобы лучше контролировать точную ширину тегов .letters a, это изменить их на float и явно указать ширину следующим образом: 

<html>
<head>
    <style>
    .filters { position: absolute; background: #ff0000 0 0 no-repeat; width: 970px; height: 31px; left: 0; text-transform: uppercase; }
    .letters { float: left; margin: 2px 0 0 7px; width: 710px; height: 30px; background-color: orange;  }
    .screenname {width: 244px; background-color: green; float: left; }
    /* flooat(710 / 27) = 26px  */
    .filters .letters a { float:left; display:block; text-align:center; width:26px; }
    /* fix offset */
    .filters .letters a:first-child { margin-left:8px; }
    .filters .letters a.disabled { color: #36373a; cursor: default; }
    .filters a { font: bold italic 12px/28px Arial, sans-serif; }
    </style>
</head>
<body>
    <div class="filters">
        <div class="screenname">
            Screen Name
        </div>
        <div class="letters">
            <a href="#" rel="#">#</a>
            <a href="#" rel="A">A</a>
            <a href="#" rel="B">B</a>
            <a href="#" rel="C">C</a>
            <a href="#" rel="D">D</a>
            <a href="#" rel="E">E</a>
            <a href="#" rel="F">F</a>
            <a href="#" rel="G">G</a>
            <a href="#" rel="H">H</a>
            <a href="#" rel="I">I</a>
            <a href="#" rel="J">J</a>
            <a href="#" rel="K">K</a>
            <a href="#" rel="L">L</a>
            <a href="#" rel="M">M</a>
            <a href="#" rel="N">N</a>
            <a href="#" rel="O">O</a>
            <a href="#" rel="P">P</a>
            <a href="#" rel="Q">Q</a>
            <a href="#" rel="R">R</a>
            <a href="#" rel="S">S</a>
            <a href="#" rel="T">T</a>
            <a href="#" rel="U">U</a>
            <a href="#" rel="V">V</a>
            <a href="#" rel="W">W</a>
            <a href="#" rel="X">X</a>
            <a href="#" rel="Y">Y</a>
            <a href="#" rel="Z">Z</a>
        </div>
    </div>
</body>
...