我一整天都在寻找解决方案。可能有一个,但我不理解CSS和DIV的解释。
非常感谢链接或帮助。我试图将DIV并排放在一个包装器中,我无法弄清楚它们为什么不排队。
感谢您的帮助。 〜Donavon
左标题= 75%,右标题= 25%,因此应该等于包装的100%,即95%。但正确的标题正在包装。
和
左,中,右portlet部分应该在同一行上对齐..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test-columns</title>
<style type="text/css">
#buttons {
border: 1px solid;
text-align: center;
width: 95%;
margin: 0 auto;
}
#container_heading {
border: 1px solid;
width: 95%;
text-align: center;
margin: 0 auto;
}
#left_heading {
border: 1px solid;
float: left;
width: 75%;
text-align: center;
margin: 0;
padding: 0;
}
#right_heading {
border: 1px solid;
float: right;
width: 25%;
text-align: center;
margin: 0;
padding: 0;
}
#controls {
clear: both;
border: 1px solid;
text-align: center;
width: 95%;
margin: 0 auto;
}
#sections {
border: 1px solid;
margin: 0px auto;
width: 95%;
}
#left_portlets {
border: 1px solid;
text-align: center;
float: left;
width: 33%;
margin: 0 auto;
}
#middle_portlets {
border: 1px solid;
text-align: center;
width: 33%;
margin: 0 auto;
}
#right_portlets {
border: 1px solid;
text-align: center;
float: right;
width: 33%;
margin: 0 auto;
}
</style>
</head>
<body style="margin: 0" >
<div id="buttons">
Buttons
</div>
<br /><br />
<div id="container_heading">
<div id="left_heading">
Left Heading
</div>
<div id="right_heading">
Right Heading
</div>
</div>
<br /><br />
<div id="controls">
Controls
</div>
<br /><br />
<div id="sections">
<div id="left_portlets">
<div id="1-1_portlet">
1-1 Portlet
</div>
<div id="1-2_portlet">
1-2 Portlet
</div>
<div id="1-3_portlet">
1-3 Portlet
</div>
</div>
<div id="middle_portlets">
<div id="2-1_portlet">
2-1 Portlet
</div>
<div id="2-2_portlet">
2-2 Portlet
</div>
<div id="2-3_portlet">
2-3 Portlet
</div>
</div>
<div id="right_portlets">
<div id="3-1_portlet">
3-1 Portlet
</div>
<div id="3-2_portlet">
3-2 Portlet
</div>
<div id="3-3_portlet">
3-3 Portlet
</div>
</div>
</div>
</body>
</html>
+ ---------------------------------------------- ----------------------------------- +
编辑:
哇。这有助于......
我从宽度中取出一个百分点来补偿边框,并添加了“display:inline-block;”排在彼此旁边的div和“box-sizing:border-box;”整个样式表。
事情正在排成行。但是现在我怎么能在外边缘上升所以一切都是正方形的?每次我做一点改变,布局都会中断。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test-columns</title>
<style type="text/css">
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
#buttons {
border: 1px solid;
text-align: center;
width: 95%;
margin: 0 auto;
}
#container_heading {
border: 0px;
width: 95%;
text-align: center;
margin: 0 auto;
}
#left_heading {
border: 1px solid;
width: 74%;
text-align: center;
margin: 0;
padding: 0;
display: inline-block;
}
#right_heading {
border: 1px solid;
width: 24%;
text-align: center;
margin: 0;
padding: 0;
display: inline-block;
}
#controls {
clear: both;
border: 1px solid;
text-align: center;
width: 95%;
margin: 0 auto;
}
#sections {
border: 0px;
margin: 0px auto;
width: 95%;
text-align: center;
}
#left_portlets {
border: 1px solid;
text-align: center;
width: 31%;
margin: 0 auto;
display: inline-block;
}
#middle_portlets {
border: 1px solid;
text-align: center;
width: 31%;
margin: 0 auto;
display: inline-block;
}
#right_portlets {
border: 1px solid;
text-align: center;
width: 31%;
margin: 0 auto;
display: inline-block;
}
</style>
<script type="text/javascript" language="javascript">
</script>
</head>
<body style="margin: 0" >
<div id="buttons">
Buttons
</div>
<div id="container_heading">
<div id="left_heading">
Left Heading
</div>
<div id="right_heading">
Right Heading
</div>
</div>
<div id="controls">
Controls
</div>
<div id="sections">
<div id="left_portlets">
<div id="1-1_portlet">
1-1 Portlet
</div>
<div id="1-2_portlet">
1-2 Portlet
</div>
<div id="1-3_portlet">
1-3 Portlet
</div>
</div>
<div id="middle_portlets">
<div id="2-1_portlet">
2-1 Portlet
</div>
<div id="2-2_portlet">
2-2 Portlet
</div>
<div id="2-3_portlet">
2-3 Portlet
</div>
</div>
<div id="right_portlets">
<div id="3-1_portlet">
3-1 Portlet
</div>
<div id="3-2_portlet">
3-2 Portlet
</div>
<div id="3-3_portlet">
3-3 Portlet
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
这是导致问题的边界,因为它增加了框的大小(75%+ 2px,每边1px)。你可以包括这个:
#left_heading,#right_heading,[anything else %-width and has borders] {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
这将通过使盒子符合包括边框的禁止宽度来纠正它,但请注意它只适用于IE8 +(显然符合标准的那些)。 IE7-您需要包含some crazy shim。对于apply to everything来说这是一个很好的策略,因为它会在块项目上为CSS节省很多麻烦。
您可能想要考虑的其他事情是使用display:inline-block;
而不是浮点数。这与box-sizing:border-box;
的范围相同(仅适用于IE8 +,但是zoom:1; *display:inline;
的IE7-后备功能相同),但是它将来会创建更多可自定义选项。如果您添加了新标题怎么办?现在你需要改变你的宽度和浮动......但如果一切都是内联块,你可以改变宽度而你是金色的。然后,您还可以在一个类声明中分配显示,而不是为不同的项目放置分配不同的浮动。
只是值得深思。
答案 1 :(得分:0)
删除边框(将其推过100%)并浮动中间方块。
一旦你这样做,他们都会落实到位......
答案 2 :(得分:0)
问题是您将边框样式与宽度结合使用,因为边框围绕元素的外部延伸。由于行中元素的组合宽度加起来为100%,因此应用边框会强制调整它以使所有元素都适合页面。
答案 3 :(得分:0)
要解决您的问题,您应该删除border
因为边框也影响1px
right and left
2px
变为4px
等效border
的宽度两个盒子,原因是盒子没有对齐,因为你已经有100%的宽度,没有4px的空间。
要使两个div对齐,您应该删除width
或调整 #left_heading {
float: left;
width: 75%;
text-align: center;
margin: 0;
padding: 0;
}
#right_heading {
float: right;
width: 25%;
text-align: center;
margin: 0;
padding: 0;
}
{{1}}