Question

.calloutWrapper 
{
background: green;
height: 50%;

text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}

.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }


.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}

http://jsfiddle.net/yux07nom/

＆＃34;标注＆＃34;之后有空格看到蓝色背景。这超出了＆＃34; calloutWrapper＆＃34;的绿色背景。我相信它是由.stretch应用于跨度造成的。

Answer 1

内联块元素将在HTML中保留一个空格。两个选择：

HTML中的这些内联块元素之间没有空格。
Float:left那些内联块元素

Answer 2

首先关闭身体两次，这不会导致你的问题，但应该解决

</body>
    <script>
    </script>
</body>

然后白色空间是由你的.stretch跨度引起的 display: inline-block;是罪魁祸首

删除那个和你的好去。有关您尝试通过该范围实现的内容的更多信息可以帮助提供更好的答案。

Answer 3

如果您尝试使用响应式广告框，则可以使用css响应式网格模板，例如bootstrap或foundation。

或者你可以向左浮动并向前三个元素添加边距。

例如 http://jsfiddle.net/yux07nom/5/

<div class="calloutWrapper">
    <div class="callout">Callout</div>
    <div class="callout">Callout</div>
    <div class="callout">Callout</div>
    <div class="callout last">Callout</div>
</div>

和CSS

.callout {
    width: 24%;
    min-height: 100%;
    background-color: blue;
    float:left;
    margin-right:1.3333333333%;
}

.callout.last{
    margin-right:0;
}

Answer 4

我不确定这是否是一个理想的解决方案。您最好的选择是将.calloutWrapper div的字体大小设置为零，然后将有用的字体大小值重新应用于.callout div，如下所示：http://jsfiddle.net/2dgx98ye/

但请注意，某些旧版浏览器（尤其是某些在手机上使用过的浏览器）会尝试应用最小字体大小来打破此问题。在现代浏览器中，即使配置了最小字体大小，也不要在font-size为0的元素上强制执行。

内联块内元素后的空白区域

4 个答案: