Question

我正在尝试使用display inline-block在页面上显示多个DIV。这工作得非常好，除了最后一行显示与某些浏览器宽度不正确的间距。这在大宽度显示器上最佳。

有谁知道如何解决这个问题？

感谢您对此提供任何帮助。

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

Answer 1

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

从text-aligin: justify;删除#container。

如果您想对齐项目div中的文本，可以将此属性添加到.item类

Answer 2

对于crossbrowser解决方案，您需要添加虚拟元素以模仿最后一行。

<强> DEMO

将这些元素添加到与<{1}}元素相同级别的 HTML 中：

.item

CSS：

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

多个内联对齐。 div在最后一行显示不正确

2 个答案: