HTML CSS和块级元素在块容器顶部对齐_Html_Css

HTML CSS和块级元素在块容器顶部对齐

html css

HTML CSS和块级元素在块容器顶部对齐,html,css,Html,Css,所以我有这个密码 <html> <head> <style type="text/css"> div.one { border:1px solid black; text-align:center; padding:.2em; height:300px; } div.one div {display:inline-block; height:100%;} </style> </head> <body&

所以我有这个密码

<html>
<head>
  <style type="text/css">
    div.one { border:1px solid black; text-align:center; padding:.2em; height:300px;
  }

    div.one div {display:inline-block; height:100%;}
  </style>
</head>
<body>

<div class="one">

  <div style="border:1px solid red; width:40%">

    <h3>1st div</h3>
    <p>line #1</p>
    <p>line #2</p>
    <p>line #3</p>
    <p>line #4</p>
  </div>

  <div style="margin:0 .2em; width:16%; border:1px solid red;">

    <h3>2nd div</h3>
    <p>line #1</p>
    <p>line #2</p>
    <p>line #3</p>
  </div>

  <div style="border:1px solid red; width:40%;">

    <h3>3rd div</h3>
    <p>line #1</p>
    <p>line #2</p>
    <p>line #3</p>
    <p>line #4</p>

  </div>

</div>

</body>
</html>


第一分区{边框：1px纯黑色；文本对齐：中间；填充：.2em；高度：300px；
}
div.one div{显示：内联块；高度：100%；}
第一组
第1行
第2行
第3行
第4行
第二组
第1行
第2行
第3行
第三组
第1行
第2行
第3行
第4行

如果你运行它，它会使中间的div向下移动，其中p元素较少，有没有一种简单的方法让它与其他div对齐

基本上，中心div被降低，因为div的内容在底部基线化。看看它们是如何有一个共同的底部？中间的div少了一段。再加一段，问题就解决了。简易修复：

div.one div {display: inline-block; height:100%; vertical-align: top;}

添加垂直对齐。它可能默认为

vertical align:baseline

，因为它是内联的

注意：

显示：内联块是。具有更好的跨浏览器支持的替代实现包括浮动内部div。不过，这需要稍加修改才能获得所需的边距