奇怪{display：table}行爲

我無法弄清楚這一點。將display:table與display:table-cell一起使用時，將img標記放置在cell1或cell2中將強制其他單元格中的內容（例如「This is a test」內容）放在圖像下方。它是否正確？它在所有瀏覽器中都這樣做，所以我認爲這是正確的，但爲什麼？奇怪{display：table}行爲

<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     html, 
     body { 
      width: 100%; 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     div { 
      border: 2px solid #000; 
      width: 100%; 
      height: 100%; 
     } 
     .table { 
      display: table; 
      border-collapse: collapse; 
     } 
     .row { 
      display: table-row; 
     } 
     .cell { 
      display: table-cell; 
      width: 50%; 
     } 
    </style> 
</head> 
<body> 
    <div class="table"> 
     <div class="row"> 
      <div id="cell1" class="cell"> 
       <h1>This is a test</h1> 
      </div> 
      <div id="cell2" class="cell"> 
       <img src="" /> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-04-01 bern

世界，你會做這種方式，而不是僅僅使用表爲什麼？ – Dave 2011-04-01 20:51:45

@bern你可以打擾一些截圖或者提供更多信息 – ant 2011-04-01 20:52:05

給你的'.cell'類一個'vertical-align：top;'似乎可以修復它。 – drudge 2011-04-01 20:52:47

嗯。 vertical-align: top在表格單元格中。

日夜不停例如：at jsFiddle

來源

2011-04-01 20:55:28

謝謝！你的好。 – bern 2011-04-01 20:58:43

這是因爲插入一個圖像到div中，使您的佈局擺脫了佈局的自然流動。

我會建議只使用表，或者如果不是這種情況使用浮動，並創建它的方式。

來源

2011-04-01 20:55:00 PHP

設置style="verticle-align:top"爲貴「細胞」的div

來源

2011-04-01 21:00:01 Orin

奇怪{display：table}行爲

回答

相關問題