0

通过显示 jsfiddle 最容易提出这个问题。

http://jsfiddle.net/jaa17/E8Skp/

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

右边的填充发生了什么？那也必须是红色/绿色。

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

我用什么，边距，边框，填充？似乎没有任何效果。

4

1 回答 1

0

最古怪的答案，但它有效。我的 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>
于 2013-10-17T13:32:35.597 回答