it-swarm.com.ru

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

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

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

256
Dameon

Просто дайте им ширину и float: left;, вот пример:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>
286
Nick Craver

Современный способ заключается в использовании CSS flexbox , см. таблицы поддержки .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Вы также можете использовать CSS-сетку , см. таблицы поддержки .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>
111
Stickers

Это так же, как вы делаете для двух div, просто плавайте третий слева или справа тоже.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
51
Sarfraz

отпустить их всех осталось

убедитесь, что указана ширина, что все они могут поместиться в своем контейнере (либо в другом div, либо в окне), иначе они будут перенесены

24
davidosomething
<br style="clear: left;" />

тот код, который кто-то опубликовал там, он сделал свое дело !!! Когда я вставляю его непосредственно перед закрытием Container DIV, это помогает очистить все последующие DIV от наложения с DIV, которые я создал рядом вверху!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa !! :)

22
Migisha

Перемести все три деления влево. Как здесь:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}
15
Arwen

Я обычно просто плаваю первым слева, вторым справа. Третий автоматически выравнивается между ними.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
9
Nick Travers
<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>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

преимущество этого способа заключается в том, что вы можете устанавливать ширину каждого столбца независимо от другой, если вы сохраняете ее менее 100%, если вы используете 3 x 30%, оставшиеся 10% делятся на 5% делителя пространства между столбцами.

8
SugaComa

попробуйте добавить "display: block" в стиль

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
6
Ann

вы можете плавать: осталось для всех из них и установить ширину 33,333%

6
Daniel A. White

Я предпочитаю этот метод, поплавки плохо поддерживаются в старых версиях 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.

4
jpbourbon

Я не видел ответа bootstrap, так что стоит:

<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 вычислит проценты. Мне нравится очищать оба, на всякий случай.

4
John Grabauskas

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

Плаваем каждый div и очищаем, оба для строки. Нет необходимости устанавливать ширину, если вы не хотите. Работает в 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;

}
3
AndrewD

Вот как мне удалось сделать нечто подобное в элементе <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;
}
2
Leniel Maccaferri

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

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

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

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

Вы можете найти подробную информацию о том, как использовать clearfix div здесь

1
aquaaarian