Как плавать 3 деления бок о бок с помощью CSS?

Question

Я знаю, как заставить 2 элемента плавать рядом, просто плавать один слева, а другой справа.

Но как это сделать с 3-мя делениями, или я должен просто использовать таблицы для этой цели?

Answer 1

Я не увидел ответ начальной загрузки, так что стоит:

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

пусть Bootstrap определит проценты. Мне нравится очищать оба, на всякий случай.

Answer 2

Я предпочитаю этот метод, поплавки плохо поддерживаются в старых версиях IE (правда? ...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

ОБНОВЛЕНО: Конечно, чтобы использовать эту технику и из-за абсолютного позиционирования вам нужно заключить div в контейнер и выполнить постобработку, чтобы определить высоту if, что-то вроде этого:

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

Не самая удивительная вещь в мире, но, по крайней мере, не ломается на старых IE.

Answer 3

Но работает ли он в Chrome?

Плавающий каждый делитель и очистить, оба для строки. Нет необходимости устанавливать ширину, если вы не хотите. Работает в Chrome 41, Firefox 37, IE 11

Нажмите для JS Fiddle

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

Answer 4

Вот как мне удалось сделать нечто подобное в элементе <footer>:

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

Answer 5

@ Leniel, этот метод хорош, но вам нужно добавить ширину ко всем плавающим элементам div. Я бы сказал, сделать их равными по ширине или назначить фиксированную ширину. Что-то вроде

.content-wrapper > div { width:33.3%; }

вы можете назначать имена классов каждому div вместо добавления inline style, что не является хорошей практикой.

Обязательно используйте clearfix div или clear div, чтобы избежать следования содержимого, оставшегося ниже этих div.

Подробности о том, как использовать clearfix div , можно найти здесь