Html 并排div未对齐

我已经创建了两个div，它们通过我在这里找到的推荐方法并排放置，即display:inline块。但我觉得另一个分区比第一个分区低。即使大小相同，第二个仍然比第一个低。以下是CSS代码：

#left {
 text-align: center;
 display: inline-block;
 width: 40%;
}
#right{
 text-align: center;
 display: inline-block;
 width: 40%;
 border-left: 2px double #cccccc;
}
.container2 {
 height: auto;
 box-sizing: border-box;
}

HTML:

地址

238烟谷街

马里兰州比尔里卡01821

817-439-3708

MarioEisenhower@jourrapide.com
工作时间

周一至周五08:00–20:00

周六08:00–14:00

以及显示问题的JSFIDLE：

---

可能是因为标签或其他缺失的东西吗？

在真正意义上，它们实际上大小不一样

---

#right

有一个

边框left:2px

，它增加了

40%

这很可能是原因。还可以尝试浮动

ID

添加

垂直对齐：顶部

到

左侧

和

右侧

#左{
文本对齐：居中；
显示：内联块；
垂直对齐：顶部；
宽度：40%；
}
#对{
文本对齐：居中；
显示：内联块；
垂直对齐：顶部；
宽度：40%；
左边框：2张双人床#中交；
}
.集装箱2{
高度：自动；
框大小：边框框；
}

地址
马萨诸塞州比尔里卡市烟谷街238号01821电话：817-439-3708MarioEisenhower@jourrapide.com
工作时间
周一至周五08:00–20:00
周六08:00–14:00

如果你把它拖小一点，你可以看到它也会影响左分区。我要添加

垂直对齐：顶部

到两个div。

它们没有垂直对齐的原因首先是因为它们的内容量不同（

#左

的内容量大于

#右

）。其次，由于您已将它们设置为显示为

内联块

，因此它们将定位为

内联

对象添加

vertical align:top

可以解决此问题。

自动将同级元素拉伸到适当高度的更简单方法是使用

flexbox

及其属性

align items:stretch

您可以使用规范。我用flexbox重写了上面的代码片段，向您展示了如何使用它。基本上，您必须添加父容器显示：flex；并用“弯曲方向”设置一个方向：行；（就你的情况而言）

#左{
文本对齐：居中；
宽度：40%；
}
#对{
文本对齐：居中；
宽度：40%；
左边框：2张双人床#中交；
}
.集装箱2{
显示器：flex；
弯曲方向：行；
高度：自动；
框大小：边框框；
}

地址
马萨诸塞州比尔里卡市烟谷街238号01821电话：817-439-3708MarioEisenhower@jourrapide.com
工作时间
周一至周五08:00–20:00
周六08:00–14:00

将段落标记（）放在左侧div的标记周围，但不放在右侧。总的来说，您的HTML无效，请修复此问题，div将对齐。

<div class="container2">
    <div id="left">
        <p><h4>Adress</h4></p>
        238 Smoky Hollow St.<br>
        Billerica, MA 01821<br>
        817-439-3708<br>
        MarioEisenhower@jourrapide.com
    </div>

    <div id="right">                            
        <h4><p>Working hours</p></h4>
        Monday - Friday  08:00 – 20:00<br>
        Saturday    08:00 – 14:00<br>                           
    </div>
</div>