Предотвращение обтекания плавающей запятой без установки родительской ширины - PullRequest
Новая
       18

Предотвращение обтекания плавающей запятой без установки родительской ширины

1 голос
/ 19 мая 2010

Я бы хотел, чтобы несколько элементов складывались горизонтально по горизонтали (в одну строку), не устанавливая ширину родительского контейнера. Я полностью осознаю, что установка контейнера div в ширину: 1000px; заставит их складываться, но по разным причинам я не хочу использовать это решение. Есть ли альтернативы? 

<html>
<head>
<style type="text/css">
div {white-space:nowrap; clear:none;}
div div {width:300px; border:1px solid black; float:left; display:inline;}
</style>
</head>
<body>
<div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
</div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 15 ноября 2012 
  display: inline;
  white-space: nowrap;
  float: none;

и на родительском элементе вам понадобится 

  overflow:hidden;
0 голосов
/ 19 мая 2010

Это не обязательно надежное решение, но если вы можете получить ровно 300 пикселей контента в каждом из внутренних блоков, вы можете удалить свойства float и width. Может быть, включить прозрачное изображение 1x300 и убедиться, что у вас не слишком много текста? Может быть, 

div.dummycontent {float:left; width:200px; background-color:Blue; }
<div class="dummycontent">&nbsp;</div>

Или, если причины не установки ширины, главным образом, заключаются в том, что не знают до времени выполнения, каким должен быть размер, возможно, рассчитайте с помощью JavaScript и установите его тогда?

...