更改容器内多个div的最后一行的对齐方式

我有一个容器div，其中包含许多div，如下所示。更改容器内多个div的最后一行的对齐方式

.result-container { 
 
    max-width: 650px; 
 
    margin: 0 auto; 
 
    background: blue; 
 
    border: 1px solid; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.result-container .item { 
 
    display: inline-block; 
 
    max-width: 200px; 
 
    min-width: 200px; 
 
    background: green; 
 
    border: 1px solid; 
 
} 
 

 
.result-container .item img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div class="result-container"> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 

 

 

 
</div>

父div有文本对齐：中心，使家长的正中央孩子的div。但我并不满足于最后一排

是外观有什么办法让我可以使结果作为下面的图片

，如果我使用的显示器：表格被认为是良好的做法感谢您的帮助。

来源

2017-04-01 Abdoo.ay

由于您的单一的DIV实际上有一个固定的宽度（max-width和min-width被设置为200像素），你可以在容器上使用一个固定的宽度，分配三个DIV宽度和容器宽度与利润之间的差额并应用text-align: left;它：

.result-container { 
    width: 614px; 
    padding: 0 18px; 
    text-align: left; 
    etc.. 
}

.result-container { 
 
    width: 614px; 
 
    padding: 0 18px; 
 
    margin: 0 auto; 
 
    background: blue; 
 
    border: 1px solid; 
 
    position: relative; 
 
    text-align: left; 
 
} 
 

 
.result-container .item { 
 
    display: inline-block; 
 
    max-width: 200px; 
 
    min-width: 200px; 
 
    background: green; 
 
    border: 1px solid; 
 
} 
 

 
.result-container .item img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div class="result-container"> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 
    <div class="item"> 
 
    <img src="http://devimg.com/150x150" width="150" height="150"> 
 

 
    </div> 
 

 

 

 
</div>

来源

2017-04-01 22:59:40 Johannes

啊哈，我看你改个的宽度e容器的宽度与三个子div的宽度完全相同，并将填充填充到容器。它解决了这个问题。谢谢：） –

更改容器内多个div的最后一行的对齐方式

回答

相关问题