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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

overflow: hidden заставит элемент расти в поплавках.

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

Ответ 4

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

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

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

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

но без добавления элемента.:: after называется псевдоэлементом. Единственная причина, по которой это лучше, чем добавление overflow:hidden; в #content, заключается в том, что вы можете переполнять абсолютные позиционные дочерние элементы и оставаться видимыми. Кроме того, он будет оставаться видимым. [/P >

Ответ 5

По какой-то причине мне никогда не нравились подходы к очистке, я полагаюсь на float и процентную ширину для таких вещей.

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

#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

Ответ 6

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

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

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

Смотрите Демо

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

Поплавки не влияют на поток. Я стараюсь добавить

<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;
}
/*  */

Обман с комментариями связан с совместимостью между браузерами.

Ответ 10

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

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

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

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

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

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

Ответ 11

Здесь лучше всего ответить Вопрос 211383

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

Ответ 12

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

• Установите ширину% для каждого дочернего DIV.

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

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

Ответ 13

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

Ответ 14

Вы можете использовать flexbox для управления макетом вашего элемента div:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>