1

我在风格之间block1和风格之间得到了不需要的余量。看到这个jsFiddle。block2display: inline-block

HTML

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#container {
    background-color: #f00;
    width: 100%;
    height: 200px;
}
#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;
}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;
}

当我将 HTML 更改为此时，边距消失：

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><div id="block2">
            block2
        </div>
    </div>
</div>

或这个：

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><!--
     --><div id="block2">
            block2
        </div>
    </div>
</div>

虽然我更喜欢后者，但我仍然想知道是否有人知道解决方案，以便我可以使用原始 HTML，但innercontainer. 另请注意，我想避免同时设置float: left;和block1/block2或使它们浮动，position: absolute|relative因为这会在我的布局中产生其他问题。有任何想法吗？

编辑

好的，所以我的布局遇到了更多麻烦。当我向 block1 添加图像时，整个块向下移动，非常奇怪（参见jsFiddle）。我现在正在使用float: left并且必须弄清楚如何添加一个消耗右侧可用空间的 div。

4

2 回答 2

1

更新这部分 css ：

#block1, #block2 {
    display: block;
    float: left;
    background-color: #00f;
    height: 200px;
}

当您内联时，空格会占用空间！

编辑 ：

为了安全起见，更改这部分 HTML

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
        <div style="clear: both"></div>
    </div>

于 2012-11-17T12:04:33.993 回答
1

如果你想使用display: inline-block;. 你需要像你提到的那样缩小标签之间的差距。因为它本身也被视为内联元素。当两个标签之间有空格或换行符时，它们之间会产生间隙。

您可以通过将周围容器的字体大小设置为 0 并将它们设置回子节点来解决此问题。

#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;

  font-size: 0px;

}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;

  font-size: 15px;

}

http://jsfiddle.net/SbUwt/27/

于 2012-11-17T12:13:12.003 回答