multiple in-line對齊。在最後一行divs顯示不正確

我想在顯示內嵌塊的頁面上顯示多個DIV。除了最後一行以某些瀏覽器寬度顯示不正確的間距之外，這種方法非常有效。這是最好的寬屏顯示器。multiple in-line對齊。在最後一行divs顯示不正確

有誰知道我該如何解決這個問題？

感謝您的任何幫助。

<style type="text/css"> 
.item { 
    Margin: 0 5px; 
    margin-bottom:30px; 
    width:160px; 
    height:240px; 
    display:inline-block !important; 
} 

#container { 
    width: -moz-calc(100% - 80px); 
    width: -webkit-calc(100% - 80px); 
    width: calc(100% - 80px); 
    text-align: justify !important; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
    margin:50px; 
} 
</style> 

<div id=container> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
    <div class="item" style="background-color:#333" width="160" height="240"></div> 
</div>

來源

2014-06-28 user1907898

可你的jsfiddle的你問題 –

爲他創建[JSFiddle]（http://jsfiddle.net/fuzzball007/VqLY7/）。 'justify'標籤正在這樣做，我假設，因爲證明文本通常不會像其他行一樣延伸最後一行。 –

CSS：

#container { 
    width: -moz-calc(100% - 80px); 
    width: -webkit-calc(100% - 80px); 
    width: calc(100% - 80px); 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
    margin:50px; 
}

從#container刪除text-aligin: justify;。

如果要對齊的項目的div裏面，你可以將此屬性添加到.item類

來源

2014-06-28 07:17:35

這裏的問題在於佈局不再是以橫向爲中心。 –

更改屬性'margin：50px;'到'margin：50px auto;'我認爲它會解決您的問題。 –

不，它會將'＃容器'元素居中，但它不會將'.item'元素居中放在容器中：http://jsfiddle.net/webtiki/VqLY7/2/ –

對於一個跨瀏覽器的解決方案文本，你需要添加的啞元模仿最後一行。

<div class="hidden"></div>

CSS：

DEMO

在同一水平.item元素，這些元素添加到您的HTML

.hidden{ 
    height:0; width: 160px; 
    display:inline-block; 
    margin: 0 5px 0 30px; 
}

來源

2014-06-28 07:22:22

感謝這更好，它幾乎完美。如果我將瀏覽器寬度降低到2個colums或1，則佈局不太好。對於兩列，有沒有一種方法可以強制物品以正確的邊距爲中心？和1列一樣，可以居中嗎？使用您正在使用的程序的 – user1907898

將無法將塊置於一個列布局中。如果你對其他方法開放，你可以看看這些問題：http://stackoverflow.com/questions/23328858/items-grid-with-inner-padding-only/23875329#23875329這一個http：// stackoverflow.com/questions/19527104/center-grid-of-inline-block-elements-in-div-but-last-row-is-aligned-with-left-e/23803215或這一個http：// stackoverflow。 com/questions/23792158/css-responsive-grid-with-equal-margins-and-fixed-size-blocks –

我正在尋找的答案是[link] http://stackoverflow.com/questions/19527104/center- grid-of-line-block-elements-in-div-but-last-row-is-align-with-left-e/23803215 我認爲這會起作用。 – user1907898

multiple in-line對齊。在最後一行divs顯示不正確

回答

相關問題