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 のスタイルに overflow:hidden または float:left を配置する必要があります。(このコンテナ div の問題ではなく、テーブル内での配置のため、列には float:left が必要であることに注意してください。) より良い説明は次のとおりです。

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 に答える