как получить эти два div рядом?

<p>у меня есть два div, которые не являются вложенными, один под другим. они оба находятся в одном родительском div, и этот родительский div повторяется. итак, по существу:</p><pre><code><div id='parent\_div\_1'> <div class ='child\_div\_1'></div> <div class ='child\_div\_2'></div> </div> <div id='parent\_div\_2'> <div class ='child\_div\_1'></div> <div class ='child\_div\_2'></div> </div> <div id='parent\_div\_3'> <div class ='child\_div\_1'></div> <div class ='child\_div\_2'></div> </div> </code></pre><p>я хочу, чтобы каждая пара <code>child\_div\_1</code> и <code>child\_div\_2</code> находилась рядом друг с другом. как я могу это сделать?</p>

<pre class="lang-css prettyprint-override"><code>#parent\_div\_1, #parent\_div\_2, #parent\_div\_3 { width: 100px; height: 100px; border: 1px solid red; margin-right: 10px; float: left; } .child\_div\_1 { float: left; margin-right: 5px; } </code></pre><p>проверьте рабочий пример на <a href="http://jsfiddle.net/c6242/1/">http://jsfiddle.net/c6242/1/</a> </p>

<p>так как div по умолчанию являются элементами <a href="http://learnlayout.com/display.html"><code>block</code></a> - это означает, что они будут занимать всю доступную ширину, попробуйте использовать -</p><pre><code>display:inline-block; </code></pre><p><code>div</code> теперь отображается как inline, т.е. не нарушает поток элементов, но все равно будет рассматриваться как блочный элемент.</p><p>я считаю эту технику легче, чем бороться с <code>float</code>s. </p><p>смотрите это руководство для получения дополнительной информации - <a href="http://learnlayout.com/inline-block.html">http://learnlayout.com/inline-block.html</a> . я бы порекомендовал даже предыдущие статьи, которые привели к этому. (нет я не писал)</p>

<p>я нашел приведенный ниже код очень полезным, он может помочь всем, кто ищет здесь</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><html> <body> <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div> <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div> <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div> </body> </html></code></pre> </div> </div> </p>

<p>лучшее, что работает для меня:</p><pre><code> .left{ width:140px; float:left; height:100%; } .right{ margin-left:140px; } </code></pre><p><br/> <a href="http://jsfiddle.net/jiantongc/7uvnn/">http://jsfiddle.net/jiantongc/7uvnn/</a> </p>

<p>используя стиль</p><pre><code>.child\_div\_1 { float:left } </code></pre>

<p>с помощью flexbox это супер просто!</p><pre><code>#parent\_div\_1, #parent\_div\_2, #parent\_div\_3 { display: flex; } </code></pre><p> <a href="http://jsfiddle.net/fu5aoo7a/">fiddle пример</a> </p>

<p>свойство <code>float:left</code> пользователя в дочернем классе div </p><p>детально проверьте структуру div: <a href="http://www.dzone.com/links/r/div\_table.html">http://www.dzone.com/links/r/div\_table.html</a> </p>

<p>использование flexbox</p><pre><code> #parent\_div\_1{ display:flex; flex-wrap: wrap; } </code></pre>