对齐顶部

我想创建一个真正的基本布局与两个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); 
}

这是一个js小提琴样本：

http://jsfiddle.net/3nAsx/

来源

2014-06-05 andymaster01

大多数浏览器渲染默认vertical-alignment值inline-block元素和值是：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

来源

2014-06-05 04:09:37 kyooriouskoala

添加到右侧的div

vertical-align: top;

来源

2014-06-05 01:54:30

但是，div背后的原因是什么？是在某个地方定义该值的css规范？ – andymaster01

您可以float:left;更换display:inline-block;声明。既然你指定了尺寸，你不需要inline-block属性。这是改变后的样子。

enter image description here

代码

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

}

来源

2014-06-05 01:58:28

谢谢，但是div的底部对齐是什么原因？ – andymaster01

好问题，不确定，但可能是默认值。 –

垂直对齐：顶部;

是不错的选择。

但是，如果你只想要一个div在左边，其他的在右边。

给浮动：左到左的div和浮动：右右格

来源

2014-06-05 01:58:45 Tushar

这种方式是好短编码

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

来源

2014-06-05 03:32:33 Kisspa

回答

相关问题