Почему это «ясно: оба» не мешает переносу? - PullRequest
Новая
       19

Почему это «ясно: оба» не мешает переносу?

2 голосов
/ 25 апреля 2009

Полагаю, что DIV со стилем clear:both может сделать его родитель, содержащий DIV, не переносимым, но ниже HTML, кажется, не работает таким образом.

Если окно браузера узкое, вторая DIV "OK OK" по-прежнему переносится на следующую строку. 

<div style="overflow: hidden;">
  <div style="float: left; overflow: hidden; white-space: nowrap">
    Hello world 1 Hello world 2 Hello world 3
  </div>
  <div style="float: left; overflow: hidden; white-space: nowrap">
    OK OK OK OK OK OK OK OK
  </div>
  <div style="clear: both;">
  </div>
</div>

Я что-то пропустил?

Ответы [ 3 ]

6 голосов
/ 25 апреля 2009

Я думаю, вы, возможно, неправильно поняли свойство "clear". Он не контролирует перенос, а контролирует размещение плавающих элементов, которые появляются после. В приведенном выше html-файле нет ничего, что мешало бы переходу второго элемента div на следующую строку.

Вот довольно хорошее краткое описание очищающих элементов: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

Чтобы макет не работал, вам, вероятно, придется указать жесткую ширину в вашем контейнере.

1 голос
/ 01 февраля 2013

Добавьте два новых свойства в свой стиль, и оно будет работать! 

text-align: left;
    width: 1010px;

                 <div style="float: left; overflow: hidden; white-space: nowrap;
                  text-align: left;width: 1010px;">
                  Hello world 1 Hello world 2 Hello world 3
                 </div>

                <div style="clear: both;">
                </div>
                <div style="float: left; overflow: hidden; white-space: nowrap;
                         text-align: left;width: 1010px;">
                        OK OK OK OK OK OK OK OK
                       </div>
                       <div style="clear: both;">
                        </div>
                        </div>
1 голос
/ 25 апреля 2009

Поскольку два внутренних элемента делятся влево, они будут перенесены, когда окно браузера станет слишком узким. Я хотел бы предложить, чтобы вы указали ширину на внешнем div (тот, который у вас есть переполнение: скрыто). Таким образом, два внутренних элемента могут плавать, но они не будут переноситься, когда браузер сжимается. 

    <div style="overflow: hidden; width: 600px;">
            <div style="float: left; overflow: hidden; white-space: nowrap">
                     Hello world 1 Hello world 2 Hello world 3
                </div>
            <div style="float: left; overflow: hidden; white-space: nowrap">
                            OK OK OK OK OK OK OK OK
                </div>
            <div style="clear: both;">
            </div>
    </div>

Если вы хотите больше контроля, вам, возможно, придется реализовать взлом min-width, используя выражения в IE; min-width: работает в FF.

...