以下是我目前所拥有的以及我想要实现的目标的截图。第二个图像我已经能够通过手动增加像素的高度来完成，但我希望这可以从容器中内容的大小自动实现。（是的，我之前已经发布过这个问题，但我不小心发布了错误的 html 和 css 编码）。
图片1：
图片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 & BATHROOM DESIGN</span></div>
<div class="services_text_padding"><span class="services_text_1">SOLID WOOD<br>
& LAMINATE FLOORING</span></div>
<div class="services_text_padding"><span class="services_text_1">PLYWOOD,<br>
MDF & 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 & 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;
}