Выровнять по центру контейнер и левые выровнять дочерние элементы
У меня есть X количество изображений (все равно высота и ширина), и я хочу отображать их на веб-странице. Но я хочу, чтобы страница автоматически отображала максимальное количество изображений в строке (без изменения размера изображений) при изменении размера браузера и для отображения изображений на фиксированном расстоянии друг от друга.
Также изображения должны быть сгруппированы в центре страницы и отображаться один за другим.
например.
Когда окно браузера достаточно велико, чтобы отображать 3 изображения в строке, они должны отображаться следующим образом.
3 изображения в строке, сгруппированные вместе на фиксированном расстоянии друг от друга, в центре страницы, один за другим.
![введите описание изображения здесь]()
И если браузер становится более широким, поэтому в строке могут отображаться 4 изображения, они должны отображаться так.
4 изображения в строке (без изменения размера изображений), сгруппированные на фиксированном расстоянии друг от друга, в центре страницы, один за другим.
![введите описание изображения здесь]()
До сих пор я написал следующий код:
HTML
<div class="outer-div">
<div class="inner-div">
<div class="image-div"><img src="images/1.png"></div>
<div class="image-div"><img src="images/2.png"></div>
<div class="image-div"><img src="images/3.png"></div>
<div class="image-div"><img src="images/4.png"></div>
<div class="image-div"><img src="images/5.png"></div>
</div>
</div>
CSS
img {
height: 200px;
width: 200px;
padding: 10px;
}
.image-div {
display: inline;
}
.outer-div {
text-align: center;
width: 100%;
}
.inner-div {
text-align: left;
display: inline;
}
Таким образом, изображения отображаются в строке с добавлением 10px внутри div (inner-div), который затем центрируется внутри внешнего div. И изображения выравниваются по тексту слева внутри-div.
Но проблема в том, что они отображаются следующим образом:
![введите описание изображения здесь]()
И как следует, когда браузер становится шире
![введите описание изображения здесь]()
Может кто-нибудь, пожалуйста, покажите мне, как отображать изображения, такие как первый набор изображений?
то есть. Максимальное количество изображений в строке (без изменения размера изображений), один за другим, сгруппированные в центре страницы, фиксированное расстояние (завернутое).
Ответы
Ответ 1
Нет простого способа достичь макета с простым CSS, насколько я знаю. Следующий подход использует медиа-запросы для установки ширины внутренних разделов для разных размеров видовых экранов.
Подумайте о том, чтобы использовать Javascript, если у вас довольно большое количество элементов, препроцессоры CSS также могут быть полезны.
См. фрагмент кода и комментарии в строке, также проверьте пример jsfiddle для легкого тестирования.
body {
margin: 10px 0;
}
.outer {
text-align: center;
}
.inner {
font-size: 0; /* fix for inline gaps */
display: inline-block;
text-align: left;
}
.item {
font-size: 16px; /* reset font size */
display: inline-block;
margin: 5px; /* gutter */
}
.item img {
vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
.inner {
width: 440px; /* (100+5+5)x4 */
}
}
@media (max-width: 441px) {
.inner {
width: 330px;
}
}
@media (max-width: 331px) {
.inner {
width: 220px;
}
}
@media (max-width: 221px) {
.inner {
width: 110px;
}
}
<div class="outer">
<div class="inner">
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
</div>
</div>
Ответ 2
Максимальное количество изображений в строке (без изменения размера изображений), один за другим, сгруппированные в центре страницы, фиксированное расстояние (завернутое).
Это был действительно хороший вопрос. Сначала это кажется очень простым, но достичь оптимального результата трудно.
Я действительно не верю, что есть способ достичь ожидаемого поведения без использования медиа-запросов.
Однако, используя некоторые медиа-запросы и точно определяя ширину изображений и максимально возможное количество изображений в строке, мы можем решить проблему, используя display: inline-*.
дисплей: встроенный блок
Должна поддерживать старые браузеры, поскольку она существует с CSS2. Мы должны использовать небольшой трюк, чтобы предотвратить рендеринг нежелательного пробела между элементами.
Трюк устанавливает свойство CSS font-size: 0.
отображение: inline-flex
В этом решении используется CSS flexbox и его хороший вариант для современных браузеров.
display: inline-table
Поддерживается с CSS2 и без трюков, необходимых для его работы.
дисплей: встроенный
Конечный результат не тот, который ожидается автором, так как элементы во второй строке будут выровнены по центру и не выровнены влево. Хорошая часть этого решения заключается в том, что он будет работать без предварительного знания ширины изображения и медиа-запросов.
.wrapper {
text-align: center;
}
.inline {
font-size: 0;
display: inline;
}
.inline-block {
display: inline-block;
font-size: 0;
text-align: left;
}
.inline-flex {
display: inline-flex;
flex-wrap: wrap;
}
.inline-table {
display: inline-table;
text-align: left;
}
.item {
margin: 10px;
}
@media (max-width: 240px) {
.inline-block,
.inline-flex,
.inline-table {
width: 120px;
}
}
@media (min-width: 241px) and (max-width: 360px) {
.inline-block,
.inline-flex,
.inline-table {
width: 240px;
}
}
@media (min-width: 361px) and (max-width: 480px) {
.inline-block,
.inline-flex,
.inline-table {
width: 360px;
}
}
@media (min-width: 481px) and (max-width: 600px) {
.inline-block,
.inline-flex,
.inline-table {
width: 480px;
}
}
@media (min-width: 601px) and (max-width: 720px) {
.inline-block,
.inline-flex,
.inline-table {
width: 600px;
}
}
@media (min-width: 721px) and (max-width: 840px) {
.inline-block,
.inline-flex,
.inline-table {
width: 720px;
}
}
<h1>display: inline-block</h1>
<div class="wrapper">
<div class="inline-block">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
</div>
</div>
<h1>display: inline-flex</h1>
<div class="wrapper">
<div class="inline-flex">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
</div>
</div>
<h1>display: inline-table</h1>
<div class="wrapper">
<div class="inline-table">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
</div>
</div>
<h1>display: inline</h1>
<div class="wrapper">
<div class="inline">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
<img class="item" src="http://dummyimage.com/100">
</div>
</div>
Ответ 3
Вот общее решение, которое может работать для вас и других.
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
CSS
ul {
margin: 0 auto; /* center container */
width: 1000px;
padding-left: 0; /* remove list padding */
list-style-type: none;
font-size: 0; /* remove inline-block white space;
see https://stackoverflow.com/a/32801275/3597276 */
}
li {
display: inline-block;
font-size: 60px; /* restore font size removed in container */
width: 150px;
height: 150px;
padding: 5px;
margin: 15px 25px;
box-sizing: border-box;
text-align: center;
line-height: 150px;
}
@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width: 600px; } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
DEMO
Re: Flexbox: Хотя flexbox - отличный инструмент, это не лучшее решение для этой конкретной проблемы. Я объясняю свои рассуждения здесь: Как центрировать гибкий контейнер, но левые элементы гибкости
Ответ 4
Я думаю, учитывая множество возможностей CSS, это довольно элегантное и многоцелевое решение с минимальным кодом.
В нижеприведенном фрагменте содержится весь необходимый CSS, и он содержит подробные комментарии.
Лучше всего работать в режиме "полная страница". Первоначально измените размер вашего браузера, пока ' rcb 1' не имеет 6 столбцов. Затем начните прокрутку и изменение размера, чтобы увидеть различные эффекты.
На первый взгляд вы можете не знать, но этот простой код имеет очень большой потенциал, как галерея, диафильм, прокрутка (как вертикальная, так и горизонтальная) и т.д.
Хотя, возможно, не 100% решение вопроса, я очень доволен результатом!
Пожалуйста, хорошо взгляните на это и дайте свой замечательный комментарий!
-Добавление -: это решение было протестировано для работы с:
- Android 5+: браузер по умолчанию
- Windows7-x32: Google Chrome (46+), Firefox (41+), Firefox DE (43+)
и IE11 +
ОБНОВЛЕНИЕ 11/20/15 Несколько модификаций кода, см. комментарии.
/* A few initial globals I always use */
html, body { box-sizing: border-box; height: 100%; width: 100%;
margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after { box-sizing: inherit }
body { max-width: 100%; margin: 0 auto }
/*******************************/
/* The important code */
/*******************************/
.rcb { /* [MANDATORY] Main Responsive Component Box container */
overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
overflow-y: auto; /* Vertical scrollbar when needed */
width: 100%; /* Maximum width within parent element */
height: auto; /* Adjust height to child element needs */
padding: 15px /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */
}
.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
display: flex; /* make element a flexible layout container */
flex-wrap: wrap; /* a row of N columns, wrapping within frame*/
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */
flex: 1 1; /* add auto or 0, or add some min required width (fiddle away!) */
min-width: 165px; /* best value is a multiple or division of 330px for all types of devices */
max-width: 100%; /* don't make this too small, leave as is or make it a multiple of min-width */
max-height: 100%; /* ditto */
min-height: auto; /* override if you want to set minimum; interacts with flex-basis! */
overflow: hidden; /* Chop off outside content */
margin: 8px /* some space between the boxes */
}
.rcb-cmp-item img {
display: block } /* -Add 11/20/15 - remove the gap below image elements
(by default, IMG is an inline element and causes bottom space) */
.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent */
min-width: 100%; /* min/max 100% makes sizes fixed to parent */
max-width: 100%
}
/* [OPTIONAL] Media Queries to keep box sizes within reasonable limits (corrected for 8px margin) */
@media all and (min-width: 721px) { .rcb-cmp-item { max-width: calc(33% - 16px) } }
@media all and (min-width: 991px) { .rcb-cmp-item { max-width: calc(25% - 16px) } }
@media all and (min-width: 1321px) { .rcb-cmp-item { max-width: calc(20% - 16px) } }
/*******************************/
/* That it, the rest is demo */
/*******************************/
/* which you can replace with your own */
body { font-family: Lato; background-color: rgba(96,125,139,1); /* bluegrey 500*/
color: rgba(255,255,255,.87); font-size: 1vmax; line-height: 1.3vmax; }
h3,
.rcb-cmp-list h4 { text-align: center }
.rcb-cmp-item { background-color: #ffc107;
color: rgba(0,0,0,.87) /* amber 500 */;
padding: 4px; /* -update 11/20/15 - see add of ".rcb-cmp-item img" */
border-radius: 2px }
.rcb-cmp-item,
.rcb-cmp-item p img { box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 3px 1px -2px rgba(0, 0, 0, 0.20),
0px 1px 5px 0px rgba(0, 0, 0, 0.12) }
.rcb-cmp-item p img { vertical-align: middle }
.rcb-cmp-item p { font-weight: 400; letter-spacing: 0 }
.rcb-cmp-item iframe { border: none }
<h3>rcb 1</h3>
<div id="rcb-control-1" class="rcb">
<div class="rcb-cmp-list">
<h4 class="rcb-cmp-item">200x200 rectangles</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<h4 class="rcb-cmp-item">odd sized rectangles</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
</div>
</div>
<h3>rcb 2</h3>
<div id="rcb-control-2" class="rcb">
<div class="rcb-cmp-list">
<h4 class="rcb-cmp-item">300x150 oblongs</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
<h4 class="rcb-cmp-item">odd sized oblongs</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x50"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500x250"></div></div>
</div>
</div>
<h3>rcb 3</h3>
<div id="rcb-control-3" class="rcb">
<div class="rcb-cmp-list">
<h4 class="rcb-cmp-item">portrait 9:16</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<h4 class="rcb-cmp-item">landscape 16:9</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
<h4 class="rcb-cmp-item">mixed 16:9 - 9:16</h4>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
</div>
</div>
<h3>rcb 4</h3>
<div id="rcb-control-4" class="rcb">
<div class="rcb-cmp-list">
<h4 class="rcb-cmp-item">odd ones out</h4>
<div class="rcb-cmp-item">empty rcb-cmp</div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">empty rcb-cmp-item-cnt</div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>While I used a few oddly shaped images in this demo, on average most images will have ratio 3:2, 4:3 or 16:9</p></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><iframe src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0"></iframe><h4>live media</h4></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x300"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">this is some text div with a <a href="javascript:void(0)">clickable anchor</a></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x300"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>this is some paragraph with a <a href="javascript:void(0)">clickable anchor</a> and a tiny image <img src="http://dummyimage.com/35"> somewhere inside</p></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x150"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x320"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x100"></div></div>
<div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/257x133"></div></div>
</div>
</div>
Ответ 5
Вам здесь не нужно заниматься сложной работой, просто поместите! important
.outer-div {
text-align: center;
width: 100%;
}
.inner-div {
text-align: left !important;
display: inline;
}
"! important" будет работать в этой ситуации
Ответ 6
У меня нет времени, чтобы улучшить то, что следует, но, надеюсь, что может помочь вам каким-то образом!
Многие случаи охвачены!
Используйте Flexbox, если вы ищете решение PureCSS!
.flex-container {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:last-child { margin-right: auto }
/** IGNORE FOLLOWING **/
.flex-container {
padding: 1em;
border: 1px solid black;
margin: 0 0 1em 0;
}
.box {
width: 100px;
height: 100px;
visibility: visible;
margin: 15px;
}
.size-lg { width: 90% }
.size-sm { width: 60% }
.size-xs { width: 40% }
.size-lg .box { background-color: yellow; }
.size-sm .box { background-color: yellow; }
.size-xs .box { background-color: yellow; }
<div class="flex-container size-lg">
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
</div>
<div class="flex-container size-sm">
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
</div>
<div class="flex-container size-xs">
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
<div class="flex-item box"></div>
</div>
Ответ 7
Я думаю, что у меня есть решение.
Рассматривая .inner как встроенный блок, вы можете использовать text-align: center, чтобы сохранить группу элементов в середине ширины ширины 100%. Что хорошо масштабируется.
.outer {
width: 100%;
text-align: center;
}
.inner {
display: inline-block;
}
.item {
display: inline-block;
float: left;
margin: 5px;
width: 100px;
height: 100px;
}
Get'fiddle wit it: http://jsfiddle.net/sLz2ok92/2/
Ответ 8
Вы можете просто добавить float: left; в .image-div класс
.image-div {
display: inline;
float:left;
}
Пример: https://jsfiddle.net/czdwkxq7/
Ответ 9
body {
margin: 10px 0;
}
.outer {
text-align: left;
width:90%;
margin:auto;
}
.inner {
font-size: 0; /* fix for gaps */
display: inline-block;
text-align: left;
}
.item {
font-size: 16px; /* reset size */
display: inline-block;
margin: 5px; /* gutter */
height:100px;
width:100px;
background:yellow;
}
<div class="outer">
<div class="inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Ответ 10
Для этого вам необходимо использовать встроенный блок. Вот хороший справочник для него: http://learnlayout.com/inline-block.html
и я сделал код, который немного похож на ваш проект: http://codepen.io/noxlux/pen/rOYYdW
body {
background: cadetblue;
}
.outer {
padding: 3%;
}
.inner {
background: aliceblue;
padding: 1%;
}
.square {
height: 100px;
width: 100px;
padding: 10px;
margin: 10px;
background: firebrick;
display: inline-block;
}
<div class="outer">
<div class="inner">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
