Что если вы хотите, чтобы все они расширялись по мере расширения страницы?
CodyBugstein
31
@imray просто используйте% вместо px
TehTris
9
Не могли бы вы уточнить, почему использовать именно <br style="clear: left;" />этот стиль в частности.
Майк де Клерк
2
@MikedeKlerk - это четкое исправление, чтобы избежать краха родителей.
Ангел Политис
как объяснил @Nick Craver, вы должны дать всем своим элементам свойство float: left . Это происходит потому, что свойство float указывает, как элемент размещается вдоль левой или правой стороны его родительского контейнера .
Но DIV - это элемент блочного уровня, верно? Тогда почему они располагаются рядом, а не в следующих строках (поскольку элементы уровня блока начинаются и заканчиваются разрывом строки). Есть ли у поплавка какое-то другое влияние на это?
Эшвин
26
отпустить их всех осталось
убедитесь, что указана ширина, что все они могут поместиться в свой контейнер (либо в другой div, либо в окно), иначе они будут перенесены
тот код, который кто-то разместил там, он сделал свое дело !!! когда я вставляю его непосредственно перед закрытием Container DIV, это помогает очистить все последующие DIV от наложения с DIV, которые я создал рядом вверху!
<div><divclass="left"></div><divclass="left"></div>
...
...
<divclass="left"></div><!-- then magic trick comes here --><brstyle="clear: left;"/></div>
Дело в том, что мой ответ является наиболее правильным, и когда новый человек будет искать этот вопрос в Интернете, он встретит мой ответ, который будет наиболее полезным для них.
Арвен
2
Это может быть. Но этому не хватает объяснения. На этом сайте можно копировать другие ответы, объединяя несколько частичных ответов в один лучший ответ. Вы можете редактировать и дополнить свой. Однако у новых пользователей есть несколько ограничений (голосование, несколько ссылок), поэтому я все же рекомендую не сосредотачиваться на старых и отвеченных вопросах.
Cfi
@cfi спасибо, я сохраню это для дальнейшего использования.
Арвен
10
Я обычно просто плаваю первым слева, вторым справа. Третий автоматически выравнивается между ними.
Разве это не вызывает путаницы при изменении размера браузера?
CodyBugstein
10
<style>.left-column
{float:left;width:30%;background-color:red;}.right-column
{float:right;width:30%;background-color:green;}.center-column
{margin:auto;width:30%;background-color:blue;}</style><divid="container"><sectionclass="left-column">THIS IS COLUMN 1 LEFT</section><sectionclass="right-column">THIS IS COLUMN 3 RIGHT</section><sectionclass="center-column">THIS IS COLUMN 2 CENTER</section></div>
Преимущество этого способа заключается в том, что вы можете устанавливать ширину каждого столбца независимо от других, если вы сохраняете ее менее 100%, если вы используете 3 x 30%, оставшиеся 10% делятся как 5% -ое пространство делителя между столбцами
ОБНОВЛЕНО: Конечно, чтобы использовать эту технику и из-за абсолютного позиционирования, вам нужно заключить div в контейнер и выполнить постобработку, чтобы определить высоту if, что-то вроде этого:
Конечно, чтобы использовать эту технику, и из-за абсолютного позиционирования вам необходимо заключить div в контейнер и выполнить постобработку, чтобы определить высоту if, что-то вроде этого:
jpbourbon
jQuery (документ) .ready (function () {jQuery ('. main'). height (Math.max (jQuery ('. column-left'). height (), jQuery ('. column-right'). height (), jQuery ('. column-center'). height ()));}); Не самая удивительная вещь в мире, но, по крайней мере, не ломается на старых IE.
jpbourbon
4
Но работает ли он в Chrome?
Плавайте каждый div и устанавливайте очистить, оба для ряда. Нет необходимости устанавливать ширину, если вы не хотите. Работает в Chrome 41, Firefox 37, IE 11
<divclass="stack"><divclass="row"><divclass="col">
One
</div><divclass="col">
Two
</div></div><divclass="row"><divclass="col">
One
</div><divclass="col">
Two
</div><divclass="col">
Three
</div></div></div>
@Leniel этот метод хорош, но вам нужно добавить ширину ко всем плавающим элементам div. Я бы сказал, сделать их равными по ширине или назначить фиксированную ширину. Что-то вроде
.content-wrapper > div { width:33.3%;}
вы можете назначать имена классов каждому div, а не добавлять inline style, что не является хорошей практикой.
Обязательно используйте clearfix div или clear div, чтобы избежать следующего содержимого, оставшегося ниже этих div.
Вы можете найти подробную информацию о том, как использовать clearfix div здесь
display: inline-block
этих парней, а не отпустить их. Если их ширина в целом меньше ширины контейнера, они будут сидеть рядом друг с другом.Ответы:
Просто дайте им ширину и
float: left;
вот пример:источник
<br style="clear: left;" />
этот стиль в частности.Современный способ - использовать CSS flexbox , см. Таблицы поддержки .
Вы также можете использовать CSS сетку , см. Таблицы поддержки .
источник
Это так же, как вы делаете для двух div, просто плавайте третий слева или справа тоже.
источник
отпустить их всех осталось
убедитесь, что указана ширина, что все они могут поместиться в свой контейнер (либо в другой div, либо в окно), иначе они будут перенесены
источник
тот код, который кто-то разместил там, он сделал свое дело !!! когда я вставляю его непосредственно перед закрытием Container DIV, это помогает очистить все последующие DIV от наложения с DIV, которые я создал рядом вверху!
tadaa !! :)
источник
Перемести все три деления влево. Как здесь:
источник
Я обычно просто плаваю первым слева, вторым справа. Третий автоматически выравнивается между ними.
источник
Преимущество этого способа заключается в том, что вы можете устанавливать ширину каждого столбца независимо от других, если вы сохраняете ее менее 100%, если вы используете 3 x 30%, оставшиеся 10% делятся как 5% -ое пространство делителя между столбцами
источник
Вы можете плавать: слева для всех из них и установить ширину 33,333%
источник
попробуйте добавить "display: block" в стиль
источник
Я не увидел ответ начальной загрузки, так что стоит:
пусть Bootstrap определит проценты. Мне нравится очищать оба, на всякий случай.
источник
Я предпочитаю этот метод, поплавки плохо поддерживаются в старых версиях IE (правда? ...)
ОБНОВЛЕНО: Конечно, чтобы использовать эту технику и из-за абсолютного позиционирования, вам нужно заключить div в контейнер и выполнить постобработку, чтобы определить высоту if, что-то вроде этого:
Не самая удивительная вещь в мире, но, по крайней мере, не ломается на старых IE.
источник
Но работает ли он в Chrome?
Плавайте каждый div и устанавливайте очистить, оба для ряда. Нет необходимости устанавливать ширину, если вы не хотите. Работает в Chrome 41, Firefox 37, IE 11
Нажмите для JS Fiddle
HTML
CSS
источник
Вот как мне удалось сделать нечто подобное в
<footer>
элементе:CSS:
источник
@Leniel этот метод хорош, но вам нужно добавить ширину ко всем плавающим элементам div. Я бы сказал, сделать их равными по ширине или назначить фиксированную ширину. Что-то вроде
вы можете назначать имена классов каждому div, а не добавлять
inline style
, что не является хорошей практикой.Обязательно используйте clearfix div или clear div, чтобы избежать следующего содержимого, оставшегося ниже этих div.
Вы можете найти подробную информацию о том, как использовать clearfix div здесь
источник