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

与 ul 一起使用 

ul:background:red   
li:background:yellow

会有用：

http://jsfiddle.net/QVX7V/

于 2012-11-22T21:43:31.167 回答