Html 将div与顶部对齐_Html_Css

Html 将div与顶部对齐

html css

Html 将div与顶部对齐,html,css,Html,Css,我试图用两个div创建一个非常基本的布局。这个想法是让一个div在同一行的左边，另一个在右边。但是，它们的高度不同为什么较小的div与底部对齐而不是与顶部对齐？这不是页面流中的预期行为吗 <body> <div> <div class="left debug-green"></div> <div class="right debug-red"></div> </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);
}


身体{
字号：0；
}
.左{
宽度：50%；
高度：30px；
显示：内联块；
}
.对{
宽度：50%；
高度：20px；
显示：内联块；
}
.调试红色{
背景色：rgb（255,0,0）；
}
.调试绿色{
背景色：rgb（0，255，0）；
}

这是一个js fiddle示例：

添加到右侧div

vertical-align: top;

添加到右div

vertical-align: top;

您可以替换

显示：内联块带有浮点的声明：左。由于仍要指定尺寸，因此不需要内联块
属性。这是我改变后的样子

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

}

您可以替换显示：内联块带有浮点的声明：左。由于仍要指定尺寸，因此不需要内联块
属性。这是我改变后的样子

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

}

垂直对齐：顶部
这是个不错的选择
但如果你只想要一个div在左边，另一个在右边
给出float:left-to-left div和float:right-to-right div
垂直对齐：顶部
vertical-align: top;

这是个不错的选择
但如果你只想要一个div在左边，另一个在右边
给出float:left-to-left div和float:right-to-right div
这种方式是很好的短编码
vertical-align: top;

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


.包裹部{
宽度：50%；
高度：30px；
显示：内联块；
背景颜色：绿色；
浮动：左；
垂直对齐：顶部；
}
.对{
高度：20px！重要；
背景色：红色！重要；
}
这种方式是很好的短编码方式
  <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;
  }


.包裹部{
宽度：50%；
高度：30px；
显示：内联块；
背景颜色：绿色；
浮动：左；
垂直对齐：顶部；
}
.对{
高度：20px！重要；
背景色：红色！重要；
}
大多数浏览器使用默认的垂直对齐
值呈现内联块
元素，该值为：基线

垂直对齐
值：
    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

垂直对齐：基线/*关键字值*/
垂直对齐：子
垂直对齐：超级
垂直对齐：文本顶部
垂直对齐：文本底部对齐
垂直对齐：中间对齐
垂直对齐：顶部
垂直对齐：底部对齐
垂直对齐：10em/*值*/
垂直对齐：4px
垂直对齐：20%/*值*/
垂直对齐：继承
大多数浏览器使用默认的垂直对齐
值呈现内联块
元素，该值为：基线

垂直对齐
值：
    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

垂直对齐：基线/*关键字值*/
垂直对齐：子
垂直对齐：超级
垂直对齐：文本顶部
垂直对齐：文本底部对齐
垂直对齐：中间对齐
垂直对齐：顶部
垂直对齐：底部对齐
垂直对齐：10em/*值*/
垂直对齐：4px
垂直对齐：20%/*值*/
垂直对齐：继承
但是，div对齐底部的原因是什么？css规范在某个地方定义了这个值吗？但是，div对齐到底是什么原因呢？css规范是否在某个地方定义了该值？谢谢，但是div底部对齐的原因是什么？好问题，不确定，但可能是默认值。谢谢，但是div底部对齐的原因是什么？好问题，不确定，但可能是默认值。