內嵌塊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元素沒有按預期方式排列

回答

相關問題