更改容器內多個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的最後一行的對齊方式

回答

相關問題