Question

我正在尝试使用两个div创建一个非常基本的布局。这个想法是在同一行中左边有一个div，右边有另一个div。但是它们没有相同的高度。

为什么较小的div与底部而不是顶部对齐？这不是页面流中的预期行为吗？

<body>
    <div>
        <div class="left debug-green"></div>
        <div class="right debug-red"></div>
    </div>
</body>


body {
    font-size: 0;
}
.left {
    width: 50%;
    height: 30px;
    display: inline-block;
}
.right {
    width: 50%;
    height: 20px;
    display: inline-block;
}
.debug-red {
    background-color: rgb(255, 0, 0);
}
.debug-green {
    background-color: rgb(0, 255, 0);
}

这是一个小提琴样本：

http://jsfiddle.net/3nAsx/

Answer 1

添加到正确的div

vertical-align: top;

Answer 2

您可以将display:inline-block;声明替换为float:left;。由于您无论如何都要指定维度，因此您不需要inline-block属性。这是我做出改变后的样子。

enter image description here

<强>代码

.left {
    width: 50%;
    height: 30px;
    float:left;
}
.right {
    width: 50%;
    height: 20px;
    float:left;

}

Answer 3

大多数浏览器使用默认inline-block值呈现vertical-alignment元素，该值为：baseline

vertical-align值：

    vertical-align: baseline     /* keyword values */
    vertical-align: sub
    vertical-align: super
    vertical-align: text-top
    vertical-align: text-bottom
    vertical-align: middle
    vertical-align: top
    vertical-align: bottom
    vertical-align: 10em          /* <length> values */
    vertical-align: 4px
    vertical-align: 20%           /* <percentage> values */
    vertical-align: inherit

Answer 4

vertical-align：top;

是不错的选择。

但如果你只想在左边有一个div而在右边有另一个。

给浮动：左到左div和浮动：从右到右div

Answer 5

这种方式很好的短编码

  <div class="wrap">
     <div class="left debug-green"></div>
     <div class="right debug-red"></div>
  </div>

   .wrap div{
     width: 50%;
     height: 30px;
     display: inline-block;
     background-color: green;
     float:left;
     vertical-align:top;
   }

 .right {
     height: 20px !important;
     background-color:red !important;
  }

将div对齐到顶部

5 个答案: