删除不需要的利润率由于HTML

断行，我得到block1和block2之间不必要的边缘具display: inline-block风格。看到这个jsFiddle。删除不需要的利润率由于HTML

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显示出来。另外请注意，我想避免两个block1和block2设置float: left;或使他们通过position: absolute|relative浮动，因为其产生在我的布局等问题。有任何想法吗？

编辑

好了，我与我的布局比较麻烦。当我添加了一个图像块1，整个街区向下移动，很奇怪（见jsFiddle）。我现在用float: left和将要弄清楚如何添加消耗右侧的自由空间核实。

来源

2012-11-17 Wouter Huysentruit

漂浮时，有什么其他问题？ –

右侧的innercontainer中的剩余空间应该填充'content'div。 –

你能修整宽度到百分比吗？即＃块1 25％＃块2的25％和新的div 50％ –

更新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-17 12:04:33

您的引用“当您在线时，空间占用空间！“让我想：如果我在'innercontainer'上设置'font-size：0px'并在'block1'和'block2'中重置正确的'font-size'，这实际上会修复它！不知道它是否是跨浏览器，请参阅[jsFiddle]（http://jsfiddle.net/Za4AE/） –

不错，赶紧试试吧，如果不行的话 –

好吧，所以我的布局更麻烦了当我添加图片到block1，整个块向下移动，非常奇怪:)我现在使用'float：left'，并且必须弄清楚如何添加一个消耗右边空闲空间的div。 –

如果你想使用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-17 12:13:12

设置字体大小到0也是我想到的，但我有更多的问题。当我添加一个图像block1，该块向下移动了一个未知的原因。看起来像'float：left'是唯一的出路2个div粘附togetter。 –

删除不需要的利润率由于HTML

回答

相关问题