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

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

问题在于，内联内容中的空白总是(逻辑上)折叠为当前字体中的单个空格，就像在常规文本中一样。

没有特定顺序的简单解决方案:

1. 申请 font-size:0到父容器并在子容器上重置它。
2. 从源代码中消除空格，即。 <div id="div1">contenido1</div><div id="div2">contenido2</div>
3. 使用float:left相反，并接受由此产生的清除元素的困惑。

如果您有 HTML 级别的控件，解决方案 2 最实用，如果它是复杂的第 3 方模板，解决方案 1 最简单，因为它只需要 CSS 覆盖，如果您自己开发一些东西，则解决方案 3 可能最简单，具体取决于布局的其余部分。