it-swarm.com.ru

Разделить деление на 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 в соответствующие позиции (правый и левый), он, кажется, игнорирует background-color содержимого div. И другой код, который я пробовал с разных сайтов, кажется, не в состоянии перевести на мою структуру.

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

74
PF1

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

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

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

56
Rob Van Dam

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

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

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

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

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

Таким образом, все это может быть сделано в CSS, а не добавление другого HTML-элемента.

47
tybro0103

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

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

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

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

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

16
tybro0103

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

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

#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

9
user18015

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

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

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

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

8
Oriol

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

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

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

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

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

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

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

в конце «div упаковки» (в данном случае содержимого). Я могу обосновать это на семантической основе, сказав, что такой параграф может быть необходим. Другой подход заключается в использовании CSS с открытым кодом:

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

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

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

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

1
Gazzer

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

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

1
Jbird

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

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

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

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

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

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

0
Rodney P. Barbati
  1. Сделать размер шрифта равным нулю в родительском DIV.
  2. Установите ширину% для каждого из дочерних DIV.

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

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

0
Berezh

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

0
Rashid Jorvee