как выровнять 3 деления (слева / по центру / справа) внутри другого деления?

<p>я хочу, чтобы 3 div были выровнены внутри контейнера div, что-то вроде этого:</p><pre><code>[[left] [center] [right]] </code></pre><p>контейнер div имеет ширину 100% (без заданной ширины), и центр div должен оставаться в центре после изменения размера контейнера.</p><p>итак, я установил:</p><pre class="lang-css prettyprint-override"><code>#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} </code></pre><p>но это становится:</p><pre><code>[[left] [center] ] [right] </code></pre><p>какие-нибудь советы?</p>

<p>с этим css, поместите ваши div'ы так (плавающие в первую очередь):</p><pre><code><div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> </code></pre><p><em>p.s.</em> вы также можете плавать вправо, затем влево, затем в центр. важно то, что поплавки идут перед "главной" центральной секцией.</p><p><em>p.p.s.</em> вам часто требуется последний внутри <code>#container</code> этого фрагмента: <code><div style="clear:both;"></div></code>, который будет расширять <code>#container</code> по вертикали, чтобы содержать оба боковых плавающих элемента, вместо того, чтобы брать его высоту только из <code>#center</code> и, возможно, позволять сторонам выступать снизу.</p>

<p>если вы не хотите изменять свою html-структуру, вы можете сделать это, добавив <code>text-align: center;</code> к элементу оболочки и <code>display: inline-block;</code> к центрированному элементу.</p><pre><code>#container { width:100%; text-align:center; } #left { float:left; width:100px; } #center { display: inline-block; margin:0 auto; width:100px; } #right { float:right; width:100px; } </code></pre><p>демонстрационная версия: <a href="http://jsfiddle.net/ch9k8/">http://jsfiddle.net/ch9k8/</a> </p>

<h2>выравнивание трех делений по горизонтали с помощью flexbox</h2><p>вот метод css3 для горизонтального выравнивания div внутри другого div.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#container { display: flex; /* establish flex container */ flex-direction: row; /* default value; can be omitted */ flex-wrap: nowrap; /* default value; can be omitted */ justify-content: space-between; /* switched from default (flex-start, see below) */ background-color: lightyellow; } #container > div { width: 100px; height: 100px; border: 2px dashed red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="container"> <div></div> <div></div> <div></div> </div></code></pre></div> </div><h2> <a href="http://jsfiddle.net/o5dyoqrx/235/">jsfiddle</a> </h2><p>свойство <code>justify-content</code> принимает пять значений:</p><ul> <li><code>flex-start</code> (по умолчанию)</li> <li><code>flex-end</code></li> <li><code>center</code></li> <li><code>space-between</code></li> <li><code>space-around</code></li> </ul><p>во всех случаях три деления находятся на одной строке. описание каждого значения см .: <a href="https://stackoverflow.com/a/33856609/3597276">https://stackoverflow.com/a/33856609/3597276</a> </p><hr><p><em> преимущества flexbox: </em></p><ol> <li>минимальный код; очень эффективный</li> <li> <a href="https://stackoverflow.com/a/33049198/3597276">центрирование как по вертикали, так и по горизонтали просто и легко</a> </li> <li> <a href="https://stackoverflow.com/a/33815389/3597276">столбцы одинаковой высоты просты и удобны</a> </li> <li> <a href="https://stackoverflow.com/a/33856609/3597276">несколько вариантов выравнивания гибких элементов</a> </li> <li>это отзывчиво</li> <li>в отличие от чисел с плавающей запятой и таблиц, которые предлагают ограниченную емкость макетов, поскольку они никогда не предназначались для создания макетов, flexbox - это современная (css3) методика с широким спектром опций.</li> </ol><hr><p><em> чтобы узнать больше о посещении flexbox: </em></p><ul> <li> <a href="https://stackoverflow.com/a/33856609/3597276">методы выравнивания элементов flex</a> </li> <li> <a href="https://developer.mozilla.org/en-us/docs/web/css/css\_flexible\_box\_layout/using\_css\_flexible\_boxes">использование гибких блоков css</a> ~ mdn</li> <li> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">полное руководство по flexbox</a> ~ css-хитрости</li> <li> <a href="https://www.youtube.com/playlist?list=plu8eosxdxhp7xj\_y6niahy0wucd4uvdid">что за flexbox?!</a> ~ видеоурок youtube</li> </ul><hr><p><strong> <em> поддержка браузера: </em> </strong> <em> flexbox поддерживается всеми основными браузерами, - <a href="http://caniuse.com/#search=flex">кроме ie <1</a> . некоторые последние версии браузеров, такие как safari 8 и ie10, требуют <a href="https://developer.mozilla.org/en-us/docs/glossary/vendor\_prefix">префиксы поставщиков</a> . для быстрого добавления префиксов используйте <a href="https://autoprefixer.github.io/">autoprefixer</a> . подробнее в <a href="https://stackoverflow.com/a/35137869/3597276">этот ответ</a> . </em></p>

<p>свойство float фактически не используется для выравнивания текста.</p><p>это свойство используется для добавления элемента вправо или влево или по центру.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div > div { border: 1px solid black;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><html> <div> <div style="float:left">first</div> <div style="float:left">second</div> <div style="float:left">third</div> <div style="float:right">first</div> <div style="float:right">second</div> <div style="float:right">third</div> </div> </html></code></pre></div> </div><p>для <code>float:left</code> вывод будет <code>[first][second][third]</code></p><p>для <code>float:right</code> вывод будет <code>[third][second][first]</code></p><p>это означает, что свойство float => left добавит ваш следующий элемент слева от предыдущего, тот же случай с правым</p><p>также необходимо учитывать ширину родительского элемента, если сумма значений ширины дочерних элементов превышает ширину родительского элемента, то следующий элемент будет добавлен на следующей строке</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <html> <div style="width:100%"> <div style="float:left;width:50%">first</div> <div style="float:left;width:50%">second</div> <div style="float:left;width:50%">third</div> </div> </html></code></pre></div> </div><p>[первая секунда]</p><p>[в третьих]</p><p>таким образом, вы должны рассмотреть все эти аспекты, чтобы получить идеальный результат</p>

<p>мне нравятся мои бары плотно и динамично. это для css 3 и html 5</p><ol> <li> <p>во-первых, ограничение ширины на 100 пикселей ограничено. не делай этого.</p> </li> <li> <p>во-вторых, установка ширины контейнера на 100% будет работать нормально, пока мы не говорили о том, что это панель заголовка/нижнего колонтитула для всего приложения, например панель навигации или панель кредитов/авторских прав. вместо этого используйте <code>right: 0;</code> для этого сценария.</p> </li> <li> <p>вы используете идентификаторы (хэш <code>#container</code>, <code>#left</code> и т.д.) вместо классов (<code>.container</code>, <code>.left</code> и т.д.), что хорошо, если только вы не хотите повторять свой шаблон стиля в другом месте кода. я бы подумал об использовании классов вместо этого.</p> </li> <li> <p>для html не нужно менять порядок: слева, по центру и справа. <code>display: inline-block;</code> исправляет это, возвращая ваш код во что-то более чистое и логически в порядке.</p> </li> <li> <p>наконец, вам нужно очистить все поплавки, чтобы они не мешали будущему <code><div></code>. вы делаете это с помощью <code>clear: both;</code></p> </li> </ol><p>подвести итоги:</p><p>html:</p><pre><code><div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> <div class="clear"></div> </div> </code></pre><p>css:</p><pre><code>.container {right: 0; text-align: center;} .container .left, .container .center, .container .right { display: inline-block; } .container .left { float: left; } .container .center { margin: 0 auto; } .container .right { float: right; } .clear { clear: both; } </code></pre><p>бонусный балл при использовании haml и sass;)</p><p>haml:</p><pre><code>.container .left .center .right .clear </code></pre><p>sass:</p><pre><code>.container { right: 0; text-align: center; .left, .center, .right { display: inline-block; } .left { float: left; } .center { margin: 0 auto; } .right { float: right; } .clear { clear: both; } } </code></pre>

<p>есть несколько трюков для выравнивания элементов.</p><p><strong>1. использование table trick</strong></p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{ display:table; } .left{ background:green; display:table-cell; width:33.33vw; } .center{ background:gold; display:table-cell; width:33.33vw; } .right{ background:gray; display:table-cell; width:33.33vw; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div></code></pre></div> </div><p><strong>2. использование flex trick</strong></p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{ display:flex; justify-content: center; align-items: center; } .left{ background:green; width:33.33vw; } .center{ background:gold; width:33.33vw; } .right{ background:gray; width:33.33vw; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div></code></pre></div> </div><p><strong>. использование float trick</strong></p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.left{ background:green; width:100px; float:left; } .center{ background:gold; width:100px; float:left; } .right{ background:gray; width:100px; float:left; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div></code></pre></div> </div>

<p>это может быть легко сделано с помощью css3 flexbox, функции, которая будет использоваться в будущем (когда <code><ie9</code> полностью мертв) почти каждым браузером.</p><p>проверьте <a href="http://caniuse.com/#search=flexbox"><strong> таблицу совместимости браузера </strong></a> </p><p><strong>html</strong></p><pre><code><div class="container"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div> </code></pre><p><strong>css</strong></p><pre><code>.container { display: flex; flex-flow: row nowrap; /* align on the same line */ justify-content: space-between; /* equal margin between the child elements */ } </code></pre><p><strong> выход: </strong></p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { display: flex; flex-flow: row nowrap; /* align on the same line */ justify-content: space-between; /* equal margin between the child elements */ } /* for presentation, not needed */ .container > div { background: #5f85db; padding: 5px; color: #fff; font-weight: bold; font-family: tahoma; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </div></code></pre></div> </div>

<p>с twitter bootstrap:</p><pre><code><p class="pull-left">left aligned text.</p> <p class="pull-right">right aligned text.</p> <p class="text-center">center aligned text.</p> </code></pre>

<p>возможный ответ, если вы хотите сохранить порядок html и не использовать flex.</p><p>html</p><pre><code><div class="a"> <div class="c"> the </div> <div class="c e"> jai ho </div> <div class="c d"> watsup </div> </div> </code></pre><p>css</p><pre><code>.a { width: 500px; margin: 0 auto; border: 1px solid red; position: relative; display: table; } .c { display: table-cell; width:33%; } .d { text-align: right; } .e { position: absolute; left: 50%; display: inline; width: auto; transform: translatex(-50%); } </code></pre><p> <a href="http://codepen.io/anon/pen/jrdwnw">код pen link</a> </p>

<p><strong> html: </strong></p><pre><code><div id="container" class="blog-pager"> <div id="left">left</div> <div id="right">right</div> <div id="center">center</div> </div> </code></pre><p><strong> css: </strong></p><pre><code> #container{width:98%; } #left{float:left;} #center{text-align:center;} #right{float:right;} </code></pre><p><code>text-align:center;</code> дает идеальное выравнивание по центру.</p><p> <a href="https://jsfiddle.net/0ydrk9e1/"><strong> jsfiddle demo </strong></a> </p>

<p>я сделал еще одну попытку, чтобы упростить это и достичь этого без необходимости контейнера.</p><p>html</p><pre><code>.box1 { background-color: #ff0000; width: 200px; float: left; } .box2 { background-color: #00ff00; width: 200px; float: right; } .box3 { background-color: #0fffff; width: 200px; margin: 0 auto; } </code></pre><p>css</p><pre><code> .box1 { background-color: #ff0000; width: 200px; float: left; } .box2 { background-color: #00ff00; width: 200px; float: right; } .box3 { background-color: #0fffff; width: 200px; margin: 0 auto; } </code></pre><p>вы можете увидеть это в прямом эфире на <a href="https://jsfiddle.net/shanehussainnaqvi/5aooae96/">jsfiddle</a> </p>

<p>используя <a href="https://getbootstrap.com/docs/3.3/">bootstrap</a> я создаю 3 элемента одинаковой ширины (в 12 столбцах по 4 столбца для каждого элемента). таким образом, вы можете сохранить центральную зону по центру, даже если левая/правая части имеют разную ширину (если они не переполняют пространство своих столбцов).</p><p>html:</p><pre><code><div id="container"> <div id="left" class="col col-xs-4 text-left">left</div> <div id="center" class="col col-xs-4 text-center">center</div> <div id="right" class="col col-xs-4 text-right">right</div> </div> </code></pre><p>css:</p><pre><code>#container { border: 1px solid #aaa; margin: 10px; padding: 10px; height: 100px; } .col { border: 1px solid #07f; padding: 0; } </code></pre><p> <a href="https://codepen.io/mortalis/pen/pewzmj">codepen</a> </p><p>чтобы создать эту структуру без библиотек, я скопировал некоторые правила из bootstrap css.</p><p>html:</p><pre><code><div id="container"> <div id="left" class="col">left</div> <div id="center" class="col">center</div> <div id="right" class="col">right</div> </div> </code></pre><p>css:</p><pre><code>* { box-sizing: border-box; } #container { border: 1px solid #aaa; margin: 10px; padding: 10px; height: 100px; } .col { float: left; width: 33.33333333%; border: 1px solid #07f; padding: 0; } #left { text-align: left; } #center { text-align: center; } #right { text-align: right; } </code></pre><p> <a href="https://codepen.io/mortalis/pen/rxkgxx">copepen</a> </p>

<p>вы можете попробовать это:</p><p>ваш html-код, как это:</p><pre><code><div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> </code></pre><p>и ваш код css, как это:</p><pre><code>#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} </code></pre><p>итак, его вывод должен быть таким:</p><pre><code>[[left] [center] [right]] </code></pre>

<p>вот изменения, которые мне пришлось внести в принятый ответ, когда я сделал это с <em> изображением </em> в качестве центрального элемента:</p><ol> <li>убедитесь, что изображение заключено в div (в данном случае <code>#center</code>). если это не так, вам придется установить <code>display</code> в <code>block</code>, и он, кажется, центрируется относительно пространства между плавающими элементами.</li> <li> <p>убедитесь, что вы установили размер изображения <strong>и</strong> его контейнера:</p> <pre><code>#center { margin: 0 auto; } #center, #center > img { width: 100px; height: auto; } </code></pre></li> </ol>