我想创建具有三个独立列(具有不同颜色)的居中 html 页面。我无法在 css 中为我的#container1 找到解决方案。红色从左侧(居中页面外)扩散。这是:http://imgur.com/D3ZAV 有人可以帮帮我吗？ 谢谢
<body>
<div id="cela">
<div id="header">
<p>hlavicka</p>
</div>
<div id="container3">
<div id="container2">
<div id="container1">
<div id="lavy"><p>Etiam ante est</p></div>
<div id="stredny"><p>Mauris orci erat</p></div>
<div id="pravy"><p>Quisque tincidunt congue orci, </p></div>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
CSS文件
#cela {
width: 80%;
margin-left: auto;
margin-right: auto;
border: 1px #110000 solid;
}
#header
{
padding:20px;
background:#008000;
}
#footer
{
clear: both;
padding:20px;
background:#008000;
}
#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#container0 {
float:left;
width:100%;
background:white;
position:relative;
right:0%;
}
#lavy
{
float:left;
width:30%;
position:relative;
left:70%;
}
#stredny
{
float:left;
width:40%;
position:relative;
left:70%;
}
#pravy
{
float:left;
width:30%;
position:relative;
left:70%;
}
(抱歉格式不好，我不明白为什么它这么烂)
最佳答案
您确实需要重新考虑您解决这个问题的方法。
我建议:将 3 个 float div 包裹在一个容器中。
<div id="container">
<div id="column1">Lorem ipsum</div>
<div id="column2">Dolor sit amet</div>
<div id="column3">Mauris orci</div>
</div>
至于您的 CSS，您可以在一些重要的基础上构建:
#container {
overflow: hidden; //this will clear the floated columns
width: 960px;
}
#column1 {
float: left;
width: 320px;
background: #f00;
}
#column2 {
float: left;
width: 320px;
background: #0f0;
}
#column3 {
float: left;
width: 320px;
background: #00f;
}
本质上:
- 包裹 float 并使用
overflow: hidden;清除它们 - float 的总宽度等于容器的宽度
关于css - html, css with center div 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5291783/