Question

我已经创建了两个div，这些div并排放在我推荐的方法中，我在这里找到了display：inline-block。但我遇到的另一个div低于第一个div的问题。即使它们具有相同的尺寸，第二个仍然位于比第一个低的位置。这是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：

<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>

并且jsfiddle显示问题： https://jsfiddle.net/dr0es1kg/1/

可能是因为标签或其他东西丢失了吗？

Answer 1

将vertical-align: top添加到#left和#right。

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

<div class="container2">
  <div id="left">
    <h4>Adress</h4>
    238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com
  </div>

  <div id="right">


    <h4>
      Working hours
    </h4>
    Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br>

  </div>
</div>

或使用flex

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

<div class="container2">
  <div id="left">
    <h4>Adress</h4>
    238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com
  </div>

  <div id="right">


    <h4>Working hours</h4>
    Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br>

  </div>
</div>

Answer 2

如果你将它拖得更小，你会发现它也会影响左边的div。我会在两个div中添加vertical-align: top;。

Answer 3

您可以使用Flexbox规范。我使用flexbox重写上面的片段，向您展示如何使用它。基本上你必须添加父容器显示：flex;并使用flex-direction设置方向：row;（对于您的情况）。

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

<div class="container2">
  <div id="left">
    <h4>Adress</h4>
    238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com
  </div>

  <div id="right">


    <h4>
      Working hours
    </h4>
    Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br>

  </div>
</div>

Answer 4

实际上，它们的大小实际上并不相同

#right有border-left:2px添加到40%这很可能是原因。也可以尝试浮动IDS。

Answer 5

他们之间没有垂直对齐的原因首先是因为他们有不同的内容量（#left超过#right）。其次，由于您已将它们设置为显示为inline-block，因此它们将被定位为inline对象。 向他们添加vertical-align: top可以解决此问题。

将兄弟元素自动拉伸到合适高度的更简单方法是使用flexbox及其属性align-items: stretch。

并排div不对齐

5 个答案: