如何爲此做CSS？

Question

我是新來的CSS，這讓我難倒。

1. 如何讓父div始終包含子元素？只要我開始使用花車進行對齊，父級將停止包含孩子。
2. 我其實不想浮物。我想調整它們。我們如何在CSS中進行對齊和邊距，而不是硬編碼所有維度？
3. 有人可以善待這個css嗎？爲了這個例子，假設總寬度是960px，所有邊距都是15px;

Answer 1

讓我們看到一個清晰的和靈活的版本：

#container { background: gray; overflow: hidden; padding: 15px; } 
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; } 

即使你看到的設置是width和height也是不必要的，箱子可以在省略時調整到它們的內容，我只是爲了演示目的而添加它們。

• jsFiddle Demo
• overflow: hidden affecting layout
• Chris Coyier: All About Floats

Answer 2

三選擇：

1. 綠色元素上設置clear: both。在父容器上設置overflow: hidden。
2. 在父容器上使用clearfix。

Answer 3

使用clearfix並將類分配給您的容器是解決問題的方法之一。

/* let's clear some floats */ 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

Answer 4

<div id="container"> 
<div id="main"> 
<div id="main_left"></div> 
<div id="main_right"></div> 
</div> 
<div id="last"></div> 
</div> 

CSS

#container 
{ 
width:xx; 
height:xx; 
background: 
} 
#main 
{ 
width:xx; 
height:xx; 
} 
#main_left{ 
float:left; 
width:xx; 
height:xx; 
} 
#main_right 
{ 
float:right 
width:xx; 
height:xx; 
} 
#last 
{ 
clear:both; 
width:xx; 
height:xx; 
} 

Answer 5

演示http://jsfiddle.net/yTUU6/

HTML

<div id="contaner"> 
    <div id="top_left"> 
     left box 
    </div> 
    <div id="top_right"> 
     right box<br /> 
     height will be changed <br /> 
     <br /><br /> <br /><br />   <br /><br /> <br /><br />  <br /><br /> <br /><br /> 
    </div> 
    <div class="clear"></div> 
    <div id="bottom"></div> 
</div> 

CSS

#contaner{ 
    width: 100%; 
    height: 400px; 
    background: #EEEEEE; 
} 
#top_left{ 
    width: 30%; 
    border:solid 1px; 
    height: 200px;  
    float:left; 
} 
#top_right{ 
    width:69%; 
    float:left; 
    border:solid 1px red; 
} 
.clear{ 
    clear: both; 
} 
#bottom{ 
    height: 100px; 
    border: solid 1px green; 
} 

Answer 6

的經典方法（我學會了如何做）在希望

之間

CSS

.clearer{ 
    clear:both; 
} 
#parent{ 
    width:500px; 
    background-color:#343434; 
    padding:10px; 
    color:#fff; 
} 

#box{ 
    width:50px; 
    height:50px; 
    margin:10px; 
    float:left; 
    background-color:#545454; 
} 

#variable{ 
    width:400px; 
    float:left; 
} 

#footer{ 
    height:40px; 
    margin-top:30px; 
    background-color:#646464; 
} 

HTML

<div id="parent"> 
    <div id="box"></div> 
    <div id="variable"> 
    </div> 
    <div class="clearer"></div> 
    <div id="footer"></div> 
</div> 

一個例子here

使用更清晰的元素這有助於幫助

Answer 7

檢查了這一點：http://jsfiddle.net/kMQbt/

HTML：

<div id="parent"> 
<div id="purple"> 
    purple 
</div> 
<div id="blue"> 
    blue 
</div> 
<div id="green"> 
    green 
</div> 
</div>​ 

的CSS：

#parent{ 
width: 960px; 
background-color: grey;  
float:none; 
padding-bottom: 15px; 
} 

#purple{ 
width: 200px; 
height: 200px; 
float:left; 
margin-top: 15px; 
margin-left: 15px; 
background-color: purple; 
} 
#green{ 
width: 930px; 
height: 200px; 
background-color: green; 
clear: both; 
margin-left: 15px; 
} 

#blue{ 
width: 715px; 
float:left; 
height: 300px; 
margin: 15px; 
background-color: blue; 
}