Html 当我试图显示两个相邻的div时，右侧的div低于左侧

我尝试在一个网站上显示两个相邻的部分，右边的部分总是略低于左边的部分。看起来是这样的：

<div class="container">
<div id="left">Content</div>
<div id="right">Content</div>
</div>

.container{display:inline-block;width:200px}

#left, #right{float:left;width:100px}

内容
内容
.container{显示：内联块；宽度：200px}
#左，#右{浮点：左；宽度：100px}

您的容器不需要是

内联块，但您的div需要是

我也会避开ID，因此我的代码不使用它们，而是只依赖于一个简单的
.container
类：

HTML

<div class="container">
    <div style="background-color: red;"></div>
    <div style="background-color: blue;"></div>
</div>

这里有一个jsfiddle显示了这一点：
不确定DIVs的最终用途是什么，但如果我使用的是网站的部分，即侧栏列中的内容列，我自己不会使用
display:inline block
。原因是什么？内联块元素将在每个元素之间产生一个单独的空间间隙，这对于某些设计是不可取的

我已经用下面的代码简化了上面的内容


。左，
.对{
颜色：白色；
浮动：左；
高度：100px；
宽度：100px；
}
.左{
背景颜色：蓝色；
}
.对{
背景色：红色；
}

内容
内容
我使用您的代码创建了这个JSFIDLE

对我来说一切都很好。这能解决你的问题吗

HTML:

我相信在您的示例中发生的是，您的容器div为您的右div创建了一个伪边距

您最终应该研究清算浮动：

无论如何，这是可行的：


.container>div{
高度：200px；
宽度：200px；
显示：内联块；
}
.货柜：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.左{
背景颜色：蓝色；
}
.对{
背景色：红色；
}

内容
内容
我也有同样的问题。
添加

您应该研究一种更现代的布局方法，它不涉及浮动-我可以推荐flexbox吗？推荐是好的，但首先要帮助他理解CSS的错误。我使用Bootstrap，它通常会解决这个问题。有时，我不得不编辑一个仍然使用旧代码的旧网站，我只是想知道如何在这些情况下修复它。@JordanForeman我认为现在就提出浮动不是一种现代方法还为时过早。我无法复制你的问题：我觉得这是正确的。有什么想法吗？让我们讨论一下我们的反对票。根据我的理解，这解决了OPs问题，是一个完全限定的答案（带有代码和一个示例链接）；然而，如果是这样的话，那么整个问题就应该结束了。建议（至少在国际海事组织）可能有益于OP的替代方法是否违反了网站的meta？如果是这样，我将接受我的否决票。但对于任何未来看到这一点的人来说，这是一个完全可以接受的解决方案，因为OP正试图实现这种布局。我一点也不苦@哈哈，是的，我知道。有点不清楚OP的要求是什么。他们似乎不想让分数参差不齐。谢谢你的否决票。这和第一个答案有什么不同？基本上相似-我只是在container div上添加了伪元素来清除浮动
.container {
    display: block;
    width: 100%;
}

.container > div {
    height: 200px;
    width: 200px;
    display: inline-block;
}

<div class="container">
    <div id="left">Content</div>
    <div id="right">Content</div>
</div>

.container {
    display:inline-block;
    width:200px; 
    font-family: Helvetica;
    color: #fff;
}

#left,
#right {
    float:left;
    width:100px;
    height: 200px;
}

#left {
    background: #493ddb;   
}

#right {
     background: #cc373d;
}

vertical-align: top;