Question

刚开始使用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>

Answer 1

它不适用，因为.bottom-part不是.main-part的孩子。如果要从main-part继承，则必须嵌套它们：

<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 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>
</div>

Answer 2

问题是你的.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。

CSS不适用某些部分

2 个答案: