HTML，CSS与中心div问题 [英] html, css with center div problem
问题描述
我想用三个分隔列（用不同的颜色）创建居中的html页面。我无法找到我的＃container1在CSS中的解决方案。红色从左侧扩展（离开中心页面）。这里是： 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>页脚< / p>
< / div>
< / div>
< / body>
CSS文件
#cela {
width：80％;
margin-left：auto;
margin-right：auto;
border：1px＃110000 solid;
}
#header
{
padding：20px;
背景：＃008000;
}
#footer
{
clear：both;
padding：20px;
背景：＃008000;
}
＃container3 {
float：left;
宽度：100％;
背景：绿色;
}
＃container2 {
float：left;
宽度：100％;
背景：黄色;
职位：亲属;
右：30％;
}
＃container1 {
float：left;
宽度：100％;
背景：红色;
职位：亲属;
右：40％;
}
＃container0 {
float：left;
宽度：100％;
背景：白色;
职位：亲属;
正确：0％;
}
#lavy
{
float：left;
宽度：30％;
职位：亲属;剩余
：70％;
}
#stredny
{
float：left;
宽度：40％;
职位：亲属;剩余
：70％;
}
#pravy
{
float：left;
宽度：30％;
职位：亲属;剩余
：70％;
$ / code> （抱歉格式不对，我找不出原因你真的需要重新考虑你对这个问题的处理方式。
< div id =container> 我会建议：3个浮动div包装在一个容器中。
< div id =column1> Lorem ipsum< / div>
< div id =column2> Dolor sit amet< / div>
< div id =column3> Mauris orci< / div>
< / div>
至于您的CSS，您可以使用一些重要的东西：
#container {
overflow：hidden; //这将清除浮动列
width：960px;
}
＃column1 {
float：left;
width：320px;
背景：＃f00;
}
＃column2 {
float：left;
width：320px;
背景：＃0f0;
}
＃column3 {
float：left;
width：320px;
背景：＃00f;
$ / code> 实质上：
- 包装浮动并使用
overflow：hidden;清除它们 - 浮动的总宽度为等于容器的宽度
I would like to create centered html page with three separated columns (with different colors). I can't find solution for my #container1 in css. The red color is spreading from left side(out of the centered page). Here it is: http://imgur.com/D3ZAV can someone please help me? thanks
<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 file
#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%;
}
(sorry for bad formatting, i can't figure out why it is so shitty )
You really need to reconsider your approach to this problem.
I'd suggest: 3 floated divs wrapped in a container.
<div id="container">
<div id="column1">Lorem ipsum</div>
<div id="column2">Dolor sit amet</div>
<div id="column3">Mauris orci</div>
</div>
And as for your CSS, there are a few significant things you can build on:
#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;
}
Essentially:
- Wrap the floats and clear them using
overflow: hidden; - The total width of the floats is equal to the width of the container
这篇关于HTML，CSS与中心div问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
