使用寬度百分比不起作用

所以我似乎沒有表格單元格達到正確的寬度。有誰能幫我解決這個問題嗎？改變寬度百分比似乎沒有做任何事情。任何建議都會很棒。謝謝。使用寬度百分比不起作用

<html> 
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> 
    <div style='display : table; width : 100%; height : 100%'> 

     <div style='display : table-row; width : 100%; height : 70%;'> 
      <div style="height:70%; width:40%; border:solid; display : table-cell;"> 
       blah 
      </div> 
      <div style="height:70%; width:60%; border:solid; display : table-cell;"> 
       kah 
      </div> 
     </div> 

     <div style='display : table-row; width : 100%; height : 30%;'> 
      <div style="height:30%; width:100%; border:solid; display : table-cell;"> 
       hah 
      </div> 
     </div> 

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

來源

2014-02-25 ctng1213

我想你想把它們排列在一起。但問題是你將你的單元格寫入不同的表格行，所以它一行一行地顯示出來。

然後還有另一個問題。你不能用div作爲內聯風格，但你需要製作2列寬。所以你應該把它分開到不同的表格。

最終應該是這樣的：

<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> 
    <div style='display : table; width : 100%; height : 70%'> 

     <div style='display : table-row; width : 100%; height : 70%;'> 
      <div style="height:70%; width:40%; border:solid; display : table-cell;"> 
       blah 
</div> 
      <div style="height:70%; width:60%; border:solid; display : table-cell;"> 
       kah 
      </div> 
     </div> 
    </div> 
     <div style='display : table; width : 100%; height : 100%'> 
     <div style='display : table-row; width : 100%; height : 30%;'> 
      <div style="height:30%; width:100%; border:solid; display : table-cell; colspan:2;"> 
       hah 
      </div> 
     </div> 

    </div>

來源

2014-02-25 07:17:28 Kuzgun

你可以實現你的願望使用inline-block的該小區的div佈局，使您的百分比大小工作，而不是使用顯示：表，因爲沒有相當於在CSS表中的colspan。單元格的高度需要爲100％，因此它們是父行高度的100％。我們還需要盒子大小：單元格上的邊框，以便單元格大小包含邊框大小，否則單元格將不適合彼此相鄰，因爲邊框寬度將被添加到單元格寬度並超過100％在正常的內容框佈局中。

您可以查看我的JSBin演示here我已經設置邊框的顏色離開它，這樣你可以清楚地看到它的div是哪個。

HTML：

<div class="table"> 
    <div class="row" style='height:70%;'> 
     <div class="cell" style="width:40%; border:1px solid red;"> 
      blah 
     </div><div class="cell" style="width:60%; border:1px solid blue;"> 
      kah 
     </div> 
    </div> 
    <div class="row" style='height:30%;'> 
     <div class="cell" style="width:100%; border:1px solid green;"> 
      hah 
     </div> 
    </div> 
</div>

CSS：

body, html {height:100%;} 

.table { width:100%; height: 100%; border: 1px solid pink; padding:0; margin:0;} 

.row { width:100%; padding:0; margin:0;} 

.cell { display: inline-block; height:100%; clear: none; padding:0; margin:0;box-sizing: border-box;}

來源

2014-02-25 07:48:09 guymid

回答

相關問題