Question

我想要左侧（蓝色页眉/页脚，绿色侧面，红色中间位置有6个内侧框），我使用此代码here获得了正确的水平内容。

enter image description here

如何将黄色方框设为红色背景和绿色/蓝色边3x2？换句话说，我怎么能做这个布局here？当我稍微改变布局时，我通常会发现黄色物体之间的间隔物不相等 - 如何用相同的间隔物制作它？

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

Answer 2

与ul li一起使用

ul:background:red   
li:background:yellow

会很有用：

http://jsfiddle.net/QVX7V/

Div和CSS：主要div中的div之间的间隔符相同？即，具有红色背景的黄色2x3盒之间的间隔物相同

2 个答案: