Question

我想让div1和div2水平对齐，但如果我使用display：inline-block，这些div之间会有一个余量。

这是我的HTML

<div>     
      <div id="content1">
        <div id="div1">contenido1</div>
        <div id="div2">contenido2</div>        
      </div>
      <div id="content2">contenido3</div>
</div>

和CSS：

#content1
{
    background-color:green;
    width: 800px;   
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#content2
{
    background-color:purple;
    width: 800px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#div1
{
    background-color:brown;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
#div2
{
    background-color:blue;
    width: 200px;
    border: 0px;
    padding: 0px;
    margin: 0px;    
    display: inline-block;
}
#div3
{
    background-color:yellow;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}

如何在CSS中完成？我不知道该怎么做。

Answer 1

问题是内联内容中的空格总是（逻辑上）折叠到当前字体中的单个空格，就像使用常规文本一样。

无特定顺序的简易解决方案：

将font-size:0应用于父容器并在子容器上重置。
消除来源的空白，即。 <div id="div1">contenido1</div><div id="div2">contenido2</div>
改为使用float:left，并接受清除元素造成的混乱。

如果你有HTML级控制解决方案2是最实用的，如果它是一个复杂的第三方模板解决方案1是最简单的，因为它只需要CSS覆盖，如果你正在开发一些自己的解决方案3可能是最简单的取决于其余的布局。

Answer 2

为什么不在容器上使用div浮动两个overflow:hidden来控制浮动：

Demo Fiddle

#content1
{
    background-color:green;
    width: 800px;   
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
    overflow:auto;
}
#content2
{
    background-color:purple;
    width: 800px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#div1
{
    background-color:brown;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px;
    float:left;
}
#div2
{
    background-color:blue;
    width: 200px;
    border: 0px;
    padding: 0px;
    margin: 0px;    
    float:left;
}

Answer 3

这就是inline-block元素的行为方式。上面评论中的This link很好地解释了一些解决方案。

但是，作为替代方案，这是一个使用display: table的好地方。这样，标记中的空格不会影响元素的显示方式。

在这个例子中：

#content1作为列的父级被赋予display: table;
#div1和#div2被赋予display: table-cell;以使它们彼此相邻。

jsBin Example!

More information from the w3.org wiki

CSS

#content1
{
    background-color:green;
    width: 800px;   
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
    display: table;
}
#content2
{
    background-color:purple;
    width: 800px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#div1
{
    background-color:brown;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px;
    display: table-cell;
    vertical-align: top;
}
#div2
{
    background-color:blue;
    width: 200px;
    border: 0px;
    padding: 0px;
    margin: 0px;    
    display: table-cell;
    vertical-align: top;
}
#div3
{
    background-color:yellow;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}

你如何使这些div元素正确显示？

3 个答案:

Demo Fiddle