0

左側（青いヘッダー/フッター、緑色の側面、内側に6つのボックスがある赤い中央のもの）が必要です。右側、つまりこのコードを使用して水平方向のものをここに配置します。

ここに画像の説明を入力してください

黄色のボックスを、背景が赤で側面が緑/青の3x2にするにはどうすればよいですか？つまり、このレイアウトをここでどのように行うことができますか？レイアウトを少し変更すると、通常、黄色いものの間のスペーサーが等しくないことがわかります。どのようにして等しいスペーサーでそれを作ることができますか？

4

2 に答える 2

1

これで正しい方向に進むはずです

<html>
<style>
        .block{
                background-color:yellow;
                height:20px;
                width:300px;
                border:20px;
                display:inline;
                float: left;
                margin:10px;
        }
        #document{
                background-color:green;
        }
        #pitches{
                background-color:red;
                margin:auto;
                overflow:auto;
                width:700px;
                height:300px;
        }
        #header, div#footer{
                background-color:blue;
                height:200px;
                margin:auto;
                overflow:auto;
                width:900px;
        }
</style>

<body>
        <div id='document'>
                <div id='header'></div>
                <div id='pitches'>
                        <div class='block'></div>
                        <div class='block'></div>
                        <div class='block'></div>
                        <div class='block'></div>
                </div>
                <div id='footer'></div>
        </div>
</body>
</html>
于 2012-11-22T21:18:48.843 に答える
0

ulliで使用する 

ul:background:red   
li:background:yellow

便利になります：

http://jsfiddle.net/QVX7V/

于 2012-11-22T21:43:31.167 に答える