刚开始使用HTML:http://pastebin.com/ZQr99cnr,想知道为什么.main-part不适用于底部。 .bottom-part中唯一适用的内容是text-align:center。其他一切似乎都被忽略了。



body {
color: #330000;
border-style: solid;
border-color: black;
border-width: 1px;
background-color: #ffffcc;
margin-left: -450px;
family-font: Verdana;
width: 900px;
height: 420px;
position: fixed;
left: 50%; }

.jake-cofee-shop {
height: 50px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 10px;
background-color: #ccaa66;
text-align:center; }

.left-part {
float: left;
width: 200px;
height: 300px;
margin-left:-1px;
background-color: #E8D882; }

.right-part {
float: right;
width: 700px;
height: 300px;
margin-right: -1px;
background-color: #f1e8b0; }

.main-part {
border-style: solid;
border-color: black;
border-width: 1px;
background-color: #f1e8b0; }

h4 {
padding-left: 12px; }

h5 {
padding-left: 12px; }

li {
padding-left: 12px; }

.image-perfection {
float: right;
margin-right: 25px;
margin-top: 75px; }

.bottom-part {
height: 60px;
background-color: #ccaa66
;
text-align: center;
border-style: solid;
border-color: black;
border-width: 1px; }
 


<h1 class="jake-cofee-shop">Jake's Cofee Shop</h1>

<div class="main-part">
<div class="left-part">
<h4><a href="#">Home</a></h4>
<h4><a href="#">Menu</a></h4>
<h4><a href="#">Music</a></h4>
<h4><a href="#">Jobs</a></h4>
</div>

<div class="right-part">
<h5>Come in and experience...</h5>
<img class="image-perfection" width="250em" src="http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2012/04/White%20Coffe%20Cup%20With%20Beans-720x405.jpg"></img>

<ul>
<li>Specialty Coffee and Tea</li>
<li>Freshly made sandwiches</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li>...</li>
</ul>

<h5 style="margin-bottom:-20px">23 Pine Road</h5>
<h5 style="margin-bottom:-20px">Nottingham, NG1 5YU</h5>
<h5>0115 9324567</h5>
</div>
</div>

<div class="bottom-part">
<h5 style="margin-bottom: 0px">Copyright @2011 Jake's Coffee House</h5>
<a href="http:www.google.com">jake@jcoffee.com</a>
</div>

最佳答案

问题是您的.main-part仅包含浮动div,并且浮动div不会强制.main-part的高度清除它们。

因此,.main-part div的高度仅为2px,而.bottom-part位于.main-part之后(在.top-part下方2px)之后。

您可以添加

.main-part:after {
  content:" ";
  display:table;
  clear:both;
}


强制.main-part div的高度清除浮动div。

08-25 11:02
查看更多