Как сделать этот макет? (переход на новую строку по центру)

Question

Как сделать этот макет? (переход на новую строку по центру)

0

#container
{
    text-align: center;
    background-color: green;
}

.box
{
    display: inline;
    margin-left: 50px;
}

<div id="container">
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
</div>

http://jsfiddle.net/VfKa4/

это я до сих пор. Я хочу добиться этого:

в соответствии с количеством синей коробки, только 3 может перейти к строке. Другой переходит к новой строке, но должен быть сосредоточен. Но я не знаю, как сделать границу, потому что не нужно левого края, все же должны быть расстояния друг от друга

John Smith 03 март 2014, в 13:16

Источник

1

синие квадраты - это div или imgs внутри div?
Evgeniy 03 март 2014, в 11:31
0

IMG внутри div
John Smith 03 март 2014, в 11:33

Теги:

html

css

4 ответа

Ещё вопросы

синие квадраты - это div или imgs внутри div?

Paulie_D · Answer 1 · 2014-03-03T09-55-00.000Z

Я думаю, что display:inline-block - это то, что вам нужно.

Демо-версия JSFiddle

CSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
    text-align: center;
    background-color: green;
    font-size:0;
    margin-bottom:10px;
}

.box
{
    display: inline-block;
    width:33%;
    margin-bottom:10px;
}

пожалуйста, проверьте это, вы поймете, в чем ошибка :)))

Niet the Dark Absol · Answer 2 · 2014-03-03T08-57-00.000Z

Добавьте width:400px к вашему контейнеру (это будет плотно прилегать к трем 100px-изображениям с полями 50px между ними) и добавить следующее правило:

.box:nth-child(3n+1) {margin-left:0}

Также обратите внимание, что для использования display:inline-block вас не может быть пробелов между элементами, так как это испортит ваш макет.

Обновленный скрипт

это не работает, если вы добавите еще один div, я проверил вашу скрипку
С еще 1 div и еще 2 div - у меня отлично работает!

Chirag Sutariya · Answer 3 · 2014-03-03T10-23-00.000Z

<div id="container">
    <center>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
    </center>
</div>

это не правильный код :) (если кто-то проголосует, это не я)
это работает правильно, попробуйте

Rumesh · Answer 4 · 2014-03-03T09-47-00.000Z

0

.box{
   margin: 0 auto;
}

Это выравнивает элементы к центру. Вы также можете установить значение маржи, изменив значение 0.

например: margin: 20px auto;

Rumesh 03 март 2014, в 09:47

0

что интересно, "margin: 20px auto"; не имеет никакого эффекта
John Smith 03 март 2014, в 11:35
0

Это потому, что они не являются block элементами. Этот ответ неверен;)
Niet the Dark Absol 03 март 2014, в 14:11
0

Извините, я неправильно прочитал ваш код ... попробуйте изменить "display: inline;" «показать: встроенный блок»;
Rumesh 03 март 2014, в 15:04

Показать ещё 1 комментарий

Как сделать этот макет? (переход на новую строку по центру)

//<![CDATA[ window.__mirage2 = {petok:"a5b3e75d858dc0870f29a3f02ffd4dedea8fac60-1567308000-1800"}; //]]> <img src="/img/755d399af81767bf4986ca91a8ea78d8.png" alt="enter image description here" />

4 ответа

Ещё вопросы