當div內的內容增加時，主容器div的高度不會動態增加

Question

下面是我目前得到的結果，以及我想實現的結果。第二個圖像我已經能夠通過手動增加像素高度來進行說明，但我希望通過容器內容的大小自動實現。 （是的，我以前發佈過這個問題，但我意外地發佈了錯誤的html和css編碼）。

此搜索：

鏡像2：

HTML：

<div id="top-body" style="clear:both"> 

<div class="content" style="clear:both;"> 

<div class="services_text"> 
<h1><span class="red">CLASSES</span></h1> 


<p class="classes">Dixon - Woods School of Dance train children from the age of 3 years upwards. All lessons consist of ballet, tap and modern/ jazz. Separate lessons are given in acrobatic and lyrical. </p> 

<br><p class="classes">All Newbold Verdon children attend on Tuesdays. Oadby pupils attend Saturdays and mid-week for stage class lessons. </p> 

<br><p class="classes">All pupils study the British Theatre Dance Association Syllabus, the school boasts an exceptionally high standard. To date the school has a 100% pass rate in examinations and medals with the above association with many children gaining the highest mark of distinction. </p> 

<br><p class="classes">Children who wish to take their dancing further, attend stage class lessons. Stage class gives the opportunity for pupils to represent the school in dance festivals and is a further commitment to the school as they are also part of a troupe who dance for the school in competitions. Stage class pupils are also more involved in our annual show. </p> 

<br><p class="classes">Adult tap lessons are availible on wednesday evenings, your never to old to start..! </p> 

<br><p class="classes">For further details please contact us, via our contact us section. </p> 
</div> 

<div class="services_outer"> 

<div class="services_text_padding"><span class="services_text_1">KITCHEN &amp; BATHROOM DESIGN</span></div> 

<div class="services_text_padding"><span class="services_text_1">SOLID WOOD<br> 
    &amp; LAMINATE FLOORING</span></div> 

<div class="services_text_padding"><span class="services_text_1">PLYWOOD,<br> 
    MDF &amp; TIMBER CUTTING</span></div> 

<div class="services_text_padding"><span class="services_text_1">KEY CUTTING SERVICES</span></div> 

<div class="services_text_padding"><span class="services_text_1">POWER TOOL REPAIRS &amp; SHARPENING</span></div> 

</div> 
</div> 
</div> 

<div id="footer1"> 
    <div id="footer-image"> 
    </div> 
</div> 

CSS：

#top-body { 
margin: 0 auto; 
background-color: #ffffff; 
height: auto; 
width: 960px; 
padding-top: 7px; 
} 

.content { 
width: 960px; 
padding: 0 1px 0 1px; 
margin: 0 3px; 
height: 351px; 
} 

.services_text { 
width: 207px; 
float: left; 
padding: 17px 0px 0 20px; 
} 

h1 { 
font-size: 1.1em; 
font-weight: normal; 
margin: 0; 
color: #000; 
padding-bottom: 10px; 
font-style: normal; 
} 

.red { 
color: #b5111a; 
} 

.services_outer { 
width: 679px; 
height: 351px; 
background: url(../images/classes.png) 0 0 no-repeat; 
margin: 1px 0 0 42px; 
float: left; 
} 

.services_text_padding { 
padding: 247px 0 0 13px; 
float: left; 
width: 126px; 
} 

.services_text_1 { 
color: #FFF; 
font-size: 1em; 
line-height: 1.3; 
} 

p.classes { 
font-size: 0.7em; 
font-weight: normal; 
margin: 0; 
color: #000; 
line-height: 1.3; 
font-style: normal; 
padding-bottom: 4px; 
} 

Answer 1

這是通過使用浮動來實現：左;在頂體股利和頁腳股利

Answer 2

在您.content類，你有height:351px;，如果你改變，要min-height:351px應該解決的問題

Answer 3

是啊，我同意ddilsaver。如果可能的話，你可以擺脫height:351px;屬性。這是什麼使div不增加。