Question

所以我有这段代码

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

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

Answer 1

想出来。

基本上降低了中心div，因为div的内容在底部有底线。看看他们有一个共同的底部？中心div只有一个段落。添加另一段，问题就消失了。轻松修复：

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

添加垂直对齐。它可能默认为vertical-align: baseline，因为它是内联的。

注意： display: inline-block是only supported in FF3+, IE8+, Opera and Chrome。具有更好的跨浏览器支持的替代实现涉及浮动内部div。这需要稍微修改才能获得您想要的边距。

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

1 个答案: