居中对齐容器并左对齐子元素

Question

我有X个图像（所有相同的高度和宽度），我想在网页上显示它们。但是我希望在调整浏览器大小时让页面自动显示一行中的最大图像数量（不调整图像大小），并以固定的距离显示图像。

此外，图像应在页面中央组合在一起，并依次显示。

e.g。 当浏览器窗口仅足够宽以在一行上显示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内居中。并且图像在内部div内部的文本对齐。

但问题是它们显示如下：

并且在浏览器变得更宽的时候如下所示

有人可以告诉我如何像第一组图像一样显示图像吗？

即。每行的最大图像数（不调整图像大小），一个接一个地组合在页面中央，固定距离（包裹）。

Answer 1

据我所知，用简单的CSS实现布局并不容易。以下方法使用媒体查询为不同的视口大小设置内部div的宽度。

如果您有相当多的项目，请考虑使用Javascript，CSS预处理器也可能有用。

请参阅内联的代码段和注释，还可以查看 jsfiddle example 以便于测试。

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>

Answer 2

  

每行的最大图像数量（不调整图像大小），一个接一个地组合在页面中央，固定距离（包裹）。

这是一个非常好的问题。起初看起来很简单，但最佳结果很难实现。

我真的不相信有一种方法可以在不使用媒体查询的情况下实现预期的行为。

但是，使用某些媒体查询并准确了解图像的宽度以及每行最多可能的图像数量，我们可以使用{{ 1}}基于属性。

显示：内联块

应支持旧浏览器，因为它自CSS2以来就存在。我们必须使用一个小技巧来防止在项目之间呈现不需要的空白区域。

诀窍是设置CSS属性display: inline-*。

显示：inline-flex

此解决方案使用CSS flexbox，它是现代浏览器的一个很好的选择。

显示：内联表格

自CSS2起也支持，并且不需要任何技巧才能使其正常工作。

显示：内嵌

最终结果不是作者所期望的结果，因为第二行中的元素将居中对齐而不是左对齐。关于这个解决方案的好处在于，它可以在没有图像宽度和媒体查询的先前知识的情况下工作。

font-size: 0

.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;
  }
}

Answer 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是一个很棒的工具，但它并不是解决这一特定问题的最佳解决方案。我在这里解释我的推理：How to center a flex container but left-align flex items

Answer 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'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>

Answer 5

你不需要在这里做任何复杂的工作，只需把！重要的

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left !important;
    display: inline;
}

“！important”将在这种情况下起作用

Answer 6

我没有时间改善以下内容，但希望能以某种方式帮助您！ 很多案例都包括在内！ 如果您正在寻找PureCSS解决方案，请使用Flexbox！

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 7

我想我已经找到了解决方案。

将.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;
}

小心翼翼地说：http://jsfiddle.net/sLz2ok92/2/

Answer 8

您只需将float: left;添加到.image-div类

即可

.image-div {
    display: inline;
    float:left;
}

示例：https://jsfiddle.net/czdwkxq7/

Answer 9

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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>