html，與中心div問題的css

我想用三個分隔的列（用不同的顏色）創建中心的html頁面。我無法找到我的＃container1在CSS中的解決方案。紅色從左側擴展（離開中心頁面）。這裏是：http://imgur.com/D3ZAV 有人可以幫我嗎？感謝html，與中心div問題的css

<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%; 
}

（對不起，壞的格式，我想不通爲什麼它是如此低劣）

來源

2011-03-13 ivanz

您的分隔欄＃container1,2,3或#lavy #stredny #pravy？ – 2011-03-13 19:38:36

對不起，我不明白你的問題 – ivanz 2011-03-13 19:41:25

你說「帶三個分隔列的頁面」。你的「分隔列」是否爲container1，contarainer2和container3;或者你的「分隔列」是div #lavy #stredny #pravy？ – 2011-03-13 19:45:05

你真的需要你的方法重新考慮這個問題。

我會建議：3個浮動divs包裝在一個容器中。

<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; 
}

本質：

裹的花車和使用清除它們overflow: hidden;
浮子的總寬度等於容器的寬度

來源

2011-03-13 19:55:26 dianovich

i fogot添加隱藏在一個容器中的溢出。問題解決了。謝謝 – ivanz 2011-03-13 20:01:53

html，與中心div問題的css

回答

相關問題