内嵌块div元素没有按预期方式排列

我有一些HTML和CSS创建内嵌块元素（div），可以在着陆页上找到它。但是，当它们包含div内的一些内容（无序列表）时，它们似乎只能正确地垂直对齐。如果div中没有内容，则该元素被推下。这是一个jsfiddle。这是代码。任何人都可以解释为什么第三个div块不是垂直对齐的吗？内嵌块div元素没有按预期方式排列

编辑：虽然我很舒服的“修复”这个问题是确保每个格使用“垂直对齐：顶部”的造型，我仍然为为什么有些不解我被要求首先使用这个样式。无论div内容如何，我都会认为div元素总是平均排列。

<html> 
    <head> 
<style type="text/css"> 
    body { 
     font-family: Helvetica; 
    } 

    h1 { 
     margin: 0px; 
     padding: 10px; 
     font-weight: bold; 
     border-bottom: 1px solid #aaaaaa; 
     font-size: 12px; 
    } 

    a { 
     text-decoration: none; 
    } 

    ul { 
     padding-left: 20px; 
    } 

    li { 
     list-style-type: none; 
     font-size: 12px; 
    } 

    .landing-block { 
     display: inline-block; 
     background-color: #eeeeee; 
     margin-right: 30px; 
     width: 192px; 
     height: 140px; 
     border: 1px solid #aaaaaa; 
     -moz-box-shadow: 3px 3px 5px #535353; 
     -webkit-box-shadow: 3px 3px 5px #535353; 
     box-shadow: 3px 3px 5px #535353; 
    } 

    .header { 
     padding: 10px; 
     background-color: red; 
     border-bottom: 1px solid #aaaaaa; 
     color: #ffffff; 
    } 

    a:hover { 
     text-decoration:underline; 
    } 

    h1 > a { 
     color: #ffffff; 
    } 

    h1 > a:hover { 
     color:#ffffff; 
    } 

    li > a { 
     color: #000000; 
    } 

    li > a:hover { 
     color: #000000; 
    } 
    </style> 
    </head> 
    <body> 
    <div> 
     <div class='landing-block'> 
      <h1 style='background-color: #3991db;'> 
       <a href='#'>COMPANIES</a> 
      </h1> 
      <ul> 
       <li><a href='#'>Search Companies</a></li> 
       <li><a href='#'>New Company</a></li> 
      <ul> 
     </div> 
     <div class='landing-block'> 
      <h1 style='background-color: #9139db;'> 
       <a href='#'>PEOPLE</a> 
      </h1> 
      <ul> 
       <li><a href='#'>Search People</a></li> 
       <li><a href='#'>New Person</a></li> 
      <ul> 
     </div> 
     <div class='landing-block'> 
      <h1 style='background-color: #c2db39;'> 
       <a href='#'>Products</a> 
      </h1> 
     </div> 
    <div> 
</body> 
</html>

来源

2013-07-16 Ken

add vertical-align：top;到.landing-block类别

来源

2013-07-16 15:21:51

默认情况下，内嵌块元素为vertical-align:baseline;。更改为vertical-align:top;

.landing-block { 
     display: inline-block; 
     background-color: #eeeeee; 
     margin-right: 30px; 
     width: 192px; 
     height: 140px; 
     border: 1px solid #aaaaaa; 
     -moz-box-shadow: 3px 3px 5px #535353; 
     -webkit-box-shadow: 3px 3px 5px #535353; 
     box-shadow: 3px 3px 5px #535353; 
     vertical-align:top; /* add this rule */ 

    }

来源

2013-07-16 15:22:22 koningdavid

谢谢，这是一个简单的修复！不过，我仍然有点困惑，究竟究竟是什么导致第三个街区像这样下移。为什么“基线”似乎是div内部内容的底部，而不是div的底部？ – Ken

@Ken第三个div实际上是在基线上，其他两个元素的内部两行“推动”div2行 – koningdavid

-3

添加浮动：左

.landing-block { 
display: inline-block; 
background-color: #eeeeee; 
margin-right: 30px; 
width: 192px; 
height: 140px; 
border: 1px solid #aaaaaa; 
-moz-box-shadow: 3px 3px 5px #535353; 
-webkit-box-shadow: 3px 3px 5px #535353; 
box-shadow: 3px 3px 5px #535353; 
float: left;

}

jsfiddle

来源

2013-07-16 15:27:29

为什么我需要一个float：left如果我已经有内嵌块可以放在里面一条线。 – Gherman

在你的CSS的.landing-block类声明设置vertical-align: top。

来源

2013-07-16 15:32:31 ponysmith

内嵌块div元素没有按预期方式排列

回答

相关问题