Html - Div Table - 背景顏色無法使用邊距，填充，邊框

此問題最簡單的方法是顯示jsfiddle。Html - Div Table - 背景顏色無法使用邊距，填充，邊框

<body style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#999999"> 
    <p>I want the red/green of the table's/row's background showing through on the left and the right, not the body's background grey. (Note the 10 pixel padding in the table's row/column.)</p> 
    <p>And what has happened to the padding on the right? That needs to be red/green too.</p> 
    <p>And these blue sections should be on the same line.</p> 
    <p>What do I use, margins, borders, padding???? Nothing seems to work.</p> 
    <div style="width:100%; height: 100%;"> 
     <!-- A Div Table --> 
     <div style="text-align: center; width: 100%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 0px; padding-right: 0px;  background-color: #FF0000;"> 
      <!-- Row --> 
      <div style="text-align: center; width: 100%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #00FF00;"> 
       <!-- Column --> 
       <div style="float: left; width: 50%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #0000FF;"> 
        <button type="button">Some Html Stuff</button> 
       </div> 
       <!-- Column --> 
       <div style="float: left; width: 50%; display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #9999FF;"> 
        <button type="button">Some Html Stuff</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

我想表的/行背景的紅色/綠色顯示在左側和右側，而不是身體的背景灰度通過。（請注意表格的行/列中的10像素填充。）

然後發生了什麼？這也需要紅/綠。

而這些藍色部分應該在同一行上。

我該如何使用邊距邊框填充？似乎沒有任何工作。

來源

2013-10-16 Rewind

最奇怪的答案，但它的工作原理。在我的jsfiddle上提供的問題和解決方案：http://jsfiddle.net/jaa17/E8Skp/

作爲容器的div認爲自己的高度爲零，因此不顯示顏色。爲了欺騙他們，你必須在CONTAINER div的風格上放置一個overflow：hidden或float：left。（注列需要一個浮動：左，由於其在表中的定位，而不是由於這個容器DIV的問題。）一個更好的解釋，這裏給出：

http://netweaver.com.au/floatHouse/

還與列未出現的問題在同一行是因爲需要填充寬度從100％寬度，所以我使用所有瀏覽器的計算功能。

<!-- A Div Table --> 
<div style="overflow: hidden; text-align: center; width: 100%; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #FF0000;"> 
    <!-- Row --> 
    <div style="overflow: hidden; text-align: center; width: 100%; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px);display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #00FF00;"> 
     <!-- Column --> 
     <div style="float: left; width: 50%; width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px);display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #0000FF;"> 
      <button type="button">Some Html Stuff</button> 
     </div> 
     <!-- Column --> 
     <div style="float: left; width: 50%; width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px); display:block; padding-top:0px; padding-bottom:0px; padding-left: 10px; padding-right: 10px; background-color: #9999FF;"> 
      <button type="button">Some Html Stuff</button> 
     </div> 
    </div> 
</div>

來源

2013-10-17 13:32:35 Rewind

Html - Div Table - 背景顏色無法使用邊距，填充，邊框

回答

相關問題