Question

通过展示一个jsfiddle，这个问题最简单。

<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像素填充。）

右边的填充物发生了什么？那也需要是红色/绿色。

这些蓝色部分应该在同一条线上。

我使用什么，边距，边框，填充？似乎没什么用。

Answer 1

最古怪的答案，但它确实有效。我的jsfiddle提供的问题和解决方案：http://jsfiddle.net/jaa17/E8Skp/

作为容器的Div认为自己的高度为零，因此没有显示颜色。为了欺骗他们，你必须把一个溢出：隐藏或漂浮：留在CONTAINER div的风格上。（注意该列需要一个float：left因为它在表中的位置而不是由于这个container-div问题。）这里给出了一个更好的解释：

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

另外，列不出现在同一行上的问题是由于需要将填充宽度从100％宽度中取出，所以我对所有浏览器都使用了calc函数。

<!-- 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>

Html - Div表 - 背景颜色不适用于边距，填充，边框

1 个答案: