DIV不會在細胞

的頂部放置我有一個簡單table like this DIV不會在細胞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <link href="Theme.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
    <div class="Calendar"> 
     <div> 
      <div> 
       <div> 
        <div class="headerLeft">yyyyyy</div> 
        <div class="headerRight">xxxxxx</div> 
        <div class="clear"></div> 
       </div> 
      </div> 

      <div> 
       <div> 
        <div class="headerLeft">yyyyyy</div> 
        <div class="headerRight">xxxxxx</div> 
        <div class="clear"></div> 
       </div> 

       <div>asfs</div> 
      </div> 

     </div> 
    </div> 
</body> 
</html>

CSS

.Calendar 
{ 
    display:table; 
    width:500px; 
    table-layout:fixed; 
} 
.Calendar > div 
{ 
    display:table-row; 
} 
.Calendar > div > div 
{ 
    display:table-cell; 
    height:70px; 
    border: solid 1px #e0e0e0; 
} 

.headerRight 
{ 
    float:right; 
} 
.headerLeft 
{ 
    float:left; 
} 
.clear 
{ 
    clear: both; 
}

爲什麼在第一個單元格的股利（「YYY XXX」）不是頂部放置？請讓我現在如果我做錯了什麼或缺少需要添加的東西。我在Firefox和Chrome上進行了測試。

來源

2012-06-23 StevenChow

您可以只添加vertical-align: top;到.Calendar > div > div css。假設您希望所有單元格的內容都與top對齊，而不是默認的middle。

來源

2012-06-23 04:01:44

的解決方案是非常不雅，但所有你需要做的是扭轉你的div的順序，所以就把.headerRight格在.headerLeft DIV面前，在你的HTML

來源

2012-06-23 03:59:51 Bryan

它仍然無法正常工作。 – StevenChow

這是你的代碼現在看起來像什麼？

xxxxxx

yyyyyy

– Bryan

添加vertical-align:top;的CSS .Calendar > div > div

.Calendar > div > div 
{ 
    vertical-align:top; 
    display:table-cell; 
    height:70px; 
    border: solid 1px #e0e0e0; 
}

這裏是DEMO

來源

2012-06-23 07:55:34

DIV不會在細胞

回答

相關問題