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

Question

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

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

Answer 1

Просто дайте им ширину и 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>

Answer 2

Современный способ - использовать 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>

Answer 3

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

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

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

Answer 4

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

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

Answer 5

<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 !! :)

Answer 6

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

.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;
}

Answer 7

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

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

Answer 8

<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% -ое пространство делителя между collumns

Answer 9

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

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


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

Answer 10

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