Question

我尝试使用不同的列创建流畅的网格布局。我有一个带有2个50％色谱柱的包装纸和一个带有4个25％色谱柱的包装纸。这在所有浏览器中运行良好，在最后一列之后有一个微小的gab（1个像素？）。添加边距和填充越来越差之后，在调整浏览器大小时，gab会更大，宽度也会不同。

我无法找到造成这种行为的原因，我在这里做错了什么？

HTML：

    <div id="column2">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear"></div>
</div>
<div id="column4">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="clear"></div>               
</div>

CSS（我遗漏了重置css，它包含在小提琴中）：

    #column2 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}

.left {
float:left;
width:50%;
height:100px;
background-color:#FFFF66
}

.right {
float:left;
width:50%;
height:100px;
background-color:#FF9900;
}



#column4 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}

#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:22.25%;
height:100px;
padding-left:1%;
padding-right:1%;
margin-left:1%;
}

#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}

.box2 {
background-color: #333399;
}

.box3 {
background-color: #3366FF;
}

.box4 {
background-color: #009900;
}

.clear {
clear:both;
}

我在这里设置了一个快速的基本小提琴：http://jsfiddle.net/emmetje/7ttsE/2/

非常感谢您的帮助！

Answer 1

它不能100％工作

但更好：http://jsfiddle.net/7ttsE/4/

<div id="column2">
<div id="spaces">%8</div>
<div class="left">left</div>
<div class="right">right</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
<div id="column4">
<div id="spaces">%8</div>
<div class="box1">box1</div>
<div id="margin">&nbsp;</div>
<div class="box2">box2</div>
<div id="margin">&nbsp;</div>
<div class="box3">box3</div>
<div id="margin">&nbsp;</div>
<div class="box4">box4</div>
<div id="spaces">%8</div>
<div class="clear"></div>               
</div>



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}


#spaces {
    width:8%;
    float:left;
}
#margin {
 float:left;
    width:1%;
}
#column2 {
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}

.left {
float:left;
width:42%;
height:100px;
background-color:#FFFF66
}

.right {
float:left;
width:42%;
height:100px;
background-color:#FF9900;
}



#column4 {
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}

#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:20.25%;
height:100px;
}

#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}

.box2 {
background-color: #333399;
}

.box3 {
background-color: #3366FF;
}

.box4 {
background-color: #009900;
}

.clear {
clear:both;
}

在野生动物园中填充/宽度的百分比

1 个答案: