Разделите Div на 2 столбца с помощью CSS

Я пытался разделить div на два столбца с помощью CSS, но мне еще не удалось заставить его работать. Моя основная структура такова:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Если я попытаюсь переместить правый и левый дивы в соответствующие позиции (правый и левый), он, похоже, игнорирует цвет фона содержимого div. И другой код, который я пробовал с разных сайтов, похоже, не может перевести в мою структуру.

Спасибо за любую помощь!

71
css css-float html

13 ответов

когда вы плаваете эти два divs, содержимое div сжимается до нулевой высоты. Просто добавьте

<br style="clear:both;"/>

после #right div, но внутри содержимого div. Это заставит контент div окружить два внутренних, плавающих divs.

55

Это хорошо работает для меня. Я разделил экран на две половины: 20% и 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>
65

другой способ сделать это, чтобы добавить overflow:hidden; к родительскому элементу плавающих элементов.

overflow: hidden заставит элемент расти, чтобы вписаться в плавающие элементы.

таким образом, все это можно сделать в css, а не добавлять другой html-элемент.

47

самый гибкий способ сделать это:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Это действует точно так же, как добавление элемента к #content:

<br style="clear:both;"/>

но без добавления элементов. :: after называется псевдо-элементом. Единственная причина, по которой это лучше, чем добавить overflow:hidden; to #content заключается в том, что вы можете иметь абсолютное переполнение дочерних элементов и все еще быть видимым. Также это позволит коробка-тени все еще были видны.

16

вот что работает в простых случаях:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; }

Если вы поместите некоторый контент, вы увидите, что он работает:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

вы можете увидеть его здесь:http://cssdesk.com/d64uy

8

сделать детей divs inline-block и они будут располагаться бок о бок:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

посмотреть демо

6

лучший способ разделить div по вертикали --

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}
3

на это лучше всего ответить здесь вопрос 211383

в наши дни любой уважающий себя человек должен использовать заявленный "микро-clearfix" подход очистки поплавков.

1

поплавки не влияют на поток. То, что я склонен делать, это добавить

<p class="extro" style="clear: both">possibly some content</p>

в конце 'wrapping div' (в данном случае содержимое). Я могу обосновать это на семантической основе, сказав, что такой абзац может потребоваться. Другой подход-использовать clearfix CSS:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

обман с комментариями для кросс-браузерной совместимости.

1
  1. сделать размер шрифта равным нулю в Родительском DIV.

  2. установить ширину % для каждого из дочерних DIVs.

    #content {
    font-size: 0;
}

#content > div {
    font-size: 16px;
    width: 50%;
}

*в Safari вам может потребоваться установить 49%, чтобы он работал.

0

разделить деление на два столбца очень легко, просто укажите ширину вашего столбца лучше, если вы поместите это (например, ширина:50%) и установите float:left для левого столбца и float:right для правого столбца.

0

ни один из ответов не ответил на исходный вопрос.

вопрос в том, как разделить div на 2 столбца с помощью css.

все вышеперечисленные ответы фактически вставляют 2 divs в один div, чтобы имитировать 2 столбца. Это плохая идея, потому что вы не сможете передавать контент в 2 столбца любым динамическим способом.

поэтому вместо вышеизложенного используйте один div, который определен как содержащий 2 столбца с использованием CSS как следует...

.two-column-div {
 column-count: 2;
}

назначьте выше как класс div, и он фактически будет передавать свое содержимое в 2 столбца. Вы можете пойти дальше и определить промежутки между полями. В зависимости от содержимого div вам может потребоваться возиться со значениями разрыва слов, чтобы ваш контент не разрезался между столбцами.

0

Я знаю, что этот пост старый, но если вы все еще ищете простое решение. 

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}
0