-1

以下是我目前所拥有的以及我想要实现的目标的截图。第二个图像我已经能够通过手动增加像素的高度来完成,但我希望这可以从容器中内容的大小自动实现。(是的,我之前已经发布过这个问题,但我不小心发布了错误的 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 &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;
}
4

3 回答 3

0

这是通过使用 float:left; 实现的。在 top-body div 和 footer div

于 2013-05-06T16:57:06.437 回答
0

是的,我同意ddilsaver。如果可能的话,您可以摆脱该height:351px;属性。这就是使 div 不增加的原因。

于 2013-05-06T17:26:49.527 回答
0

在您的.content课堂上,height:351px;如果您将其更改为min-height:351px那应该可以解决问题

于 2013-05-06T17:22:31.903 回答