居中alignment容器并左alignment子元素
我有X个图像（全部相同的高度和宽度），我想在网页上显示它们。 但是，当浏览器resize时，我希望使页面自动显示连续的图像的最大数量（不调整图像大小），并且显示图像相距固定的距离。
另外，图像应该在页面的中间一起分组，并且一个接一个地显示。
例如，当浏览器窗口的宽度足以在一行上显示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; }
所以图像显示在一个div（inner-div）内的10px填充内嵌，然后居中放置在outer-div内。 图像文字alignment内部div的左侧。
但问题是他们显示如下：
而当浏览器变得更宽时，就像下面这样 
有人可以告诉我如何显示像第一组图像的图像？
即每行的图像最大数量（不调整图像大小），一个接一个，在页面中心分组，一起固定距离（包裹）。
据我所知，用简单的CSS实现布局并不容易。 以下方法使用媒体查询为不同的视口大小设置内部div的宽度。
如果你有相当多的项目，可以考虑使用Javascript，CSS预处理器也可能有帮助。
查看代码片段和评论内联，也检查了jsfiddle的例子，以便于testing。
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>
每行图像的最大数量（不调整图像大小），一个接一个，在页面中间分组在一起，固定距离（包裹）。
这是一个非常好的问题。 起初看起来很简单，但是最好的结果很难实现。
我不相信有一种方法可以在不使用媒体查询的情况下实现预期的行为。
但是，利用一些媒体查询并准确知道图像的宽度和每行 图像的最大可能数量，我们可以使用display: inline-* based属性来解决问题。
显示：内嵌块
应该支持旧的浏览器，因为它自CSS2以来。 我们必须使用一些小技巧来防止在项目之间渲染不需要的空白。
诀窍是设置CSS属性font-size: 0 。
显示：inline-flex
这个解决scheme利用了CSS flexbox ，是现代浏览器的一个很好的select。
显示：内联表
由于CSS2也支持，并没有任何技巧，以使其工作。
显示：内联
最后的结果不是作者期望的结果，因为第二行中的元素将居中alignment，而不是左alignment。 关于这个解决scheme的好处是，它将在没有图像宽度和媒体查询的先前知识的情况下工作。
.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>
这是一个通用的解决scheme，可以为你和其他人。
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
回复：Flexbox ：虽然Flexbox是一个很棒的工具，但它不是解决这个问题的最佳方法。 我在这里解释我的推理： 如何居中柔性容器，但左alignment弹性项目
我认为，考虑到CSS的众多可能性，这是一个相当优雅和多用途的解决scheme，只需最less的代码。
下面的代码片段包含了所有必要的CSS，并附带广泛的评论。 最好在“整页”模式下运行。 初始调整您的浏览器，直到' rcb 1 '有6列 。 然后开始滚动和resize，以查看各种效果。
乍一看，你可能不知道，但这个简单的代码有非常大的潜力，如画廊，幻灯片，滚动（垂直和水平）等
虽然也许不是100％的解决scheme，但我对结果感到非常满意！
请好好看看，并给予您赞赏的评论！
– 附录 – ：此解决scheme已经过testing，可以与：
- 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's 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>
你不需要在这里做任何复杂的工作，只要把重要的
.outer-div { text-align: center; width: 100%; } .inner-div { text-align: left !important; display: inline; }
“重要的”将在这种情况下工作
我没有时间来改善下面的内容，但希望能够以某种方式帮助你！ 覆盖很多案例！ 如果您正在寻找PureCSS解决scheme，请使用Flexbox！
.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>
我想我有一个解决scheme。
将.inner作为内联块处理，可以使用text-align: center将项目组保持在100％宽度div的中间。 这很好地缩小了。
.outer { width: 100%; text-align: center; } .inner { display: inline-block; } .item { display: inline-block; float: left; margin: 5px; width: 100px; height: 100px; }
Get'fiddle机智： http : //jsfiddle.net/sLz2ok92/2/
你可以添加float: left; 到.image-div类
.image-div { display: inline; float:left; }
例如： https ： //jsfiddle.net/czdwkxq7/
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>
要做到这一点，你需要使用内联块。 这是一个很好的指导： http : //learnlayout.com/inline-block.html
我做了一个codepen，有点像你的项目在这里： 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>
