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

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

<p>когда вы перемещаете эти два div, div содержимого сворачивается до нулевой высоты. просто добавь</p><pre><code><br style="clear:both;"/> </code></pre><p>после # правого div, но внутри содержимого div. это заставит содержимое div окружать два внутренних плавающих элемента div.</p>

<p>это хорошо работает для меня. я разделил экран на две половины: 20% и 80%:</p><pre><code><div style="width: 20%; float:left"> #left content in here </div> <div style="width: 80%; float:right"> #right content in there </div> </code></pre>

<p>другой способ сделать это - добавить <code>overflow:hidden;</code> к родительскому элементу плавающих элементов.</p><p>переполнение: скрытый элемент будет расти, чтобы поместиться в плавающие элементы.</p><p>таким образом, все это может быть сделано в css, а не добавление другого html-элемента.</p>

<p>самый гибкий способ сделать это:</p><pre><code>#content::after { display:block; content:""; clear:both; } </code></pre><p>это действует точно так же, как добавление элемента в #content:</p><pre><code><br style="clear:both;"/> </code></pre><p>но без фактического добавления элемента. :: after называется псевдоэлементом. единственная причина, по которой это лучше, чем добавление <code>overflow:hidden;</code> к #content, заключается в том, что вы можете иметь абсолютное позиционное переполнение дочерних элементов и оставаться видимым. также это позволит box-shadow'ам оставаться видимыми.</p>

<p>по какой-то причине мне никогда не нравились подходы очистки, я полагаюсь на поплавки и процентную ширину для подобных вещей.</p><p>вот что работает в простых случаях:</p><pre><code>#content { overflow:auto; width: 600px; background: gray; } #left, #right { width: 40%; margin:5px; padding: 1em; background: white; } #left { float:left; } #right { float:right; } </code></pre><p>если вы добавите какой-то контент, вы увидите, что он работает:</p><pre><code><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> </code></pre><p>вы можете увидеть это здесь: <a href="http://cssdesk.com/d64uy">http://cssdesk.com/d64uy</a> </p>

<p>сделайте дочерние элементы div <code>inline-block</code>, и они будут располагаться рядом:</p><pre><code>#content { width: 500px; height: 500px; } #left, #right { display: inline-block; width: 45%; height: 100%; } </code></pre><p>смотрите <a href="https://jsfiddle.net/fyvlsd21/">демо</a> </p>

<p>лучший способ разделить деление по вертикали -</p><pre><code>#parent { margin: 0; width: 100%; } .left { float: left; width: 60%; } .right { overflow: hidden; width: 40%; } </code></pre>

<p>я знаю, что этот пост старый, но если кто-то из вас все еще ищет более простое решение. </p><pre><code>#container .left, #container .right { display: inline-block; } #container .left { width: 20%; float: left; } #container .right { width: 80%; float: right; } </code></pre>

<p>поплавки не влияют на поток. то, что я склонен делать, это добавить</p><pre><code><p class="extro" style="clear: both">possibly some content</p> </code></pre><p>в конце «div упаковки» (в данном случае содержимого). я могу обосновать это на семантической основе, сказав, что такой параграф может быть необходим. другой подход заключается в использовании css с открытым кодом:</p><pre class="lang-css prettyprint-override"><code>#content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #content { display: inline-block; } /* \*/ * html #content { height: 1%; } #content { display: block; } /* */ </code></pre><p>хитрость с комментариями для кросс-браузерной совместимости.</p>

<p>здесь лучше всего ответить <a href="https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best">вопрос 211383</a> </p><p>в наши дни любой уважающий себя человек должен использовать заявленный подход «микроочистки» для очистки поплавков.</p>

<p>ни один из приведенных ответов не отвечает на первоначальный вопрос.</p><p>вопрос в том, как разделить div на 2 столбца с помощью css.</p><p>все вышеприведенные ответы на самом деле включают 2 деления в одно деление, чтобы имитировать 2 столбца. это плохая идея, потому что вы не сможете динамически передавать содержимое в 2 столбца.</p><p>таким образом, вместо вышеперечисленного, используйте один div, который определен, чтобы содержать 2 столбца, используя css следующим образом:.</p><pre><code>.two-column-div { column-count: 2; } </code></pre><p>назначьте вышеприведенное как класс для div, и оно фактически будет передавать содержимое в 2 столбца. вы можете пойти дальше и определить промежутки между полями. в зависимости от содержимого div, вам может понадобиться возиться со значениями разрыва word, чтобы ваш контент не разрезался между столбцами.</p>

<ol> <li>сделать размер шрифта равным нулю в родительском div.</li> <li><p>установите ширину% для каждого из дочерних div.</p> <pre><code>#content { font-size: 0; } #content > div { font-size: 16px; width: 50%; } </code></pre></li> </ol><p>* в safari вам может потребоваться установить 49%, чтобы все заработало.</p>

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