Question

当我把浮动放到我的#middle-content时，我遇到了问题。浮子不显示。而且，这也消除了它的背景。我希望middle-content位于#leftcontent的右侧。请帮助!!

<body>
<div id="page">
    <div id="banner">
        <div id="cloud">
          <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />    </div> 
      <!--cloud-->
<div id="home">
          <h2>HOME</h2>
        </div> 
      <!--home-->
    </div> <!--banner-->    

<div id="maincontent">
    <div id="leftcontent">
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">Home</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/catalog.html">About Us</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/calendar.html">Products</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/promotion.html">Contact</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">ABOUT US</a>
        </div><!--navigation-->
    </div> <!--leftcontent-->

  <div id="middle-content">
    <h1>Welcome To Bagger</h1>
  </div> <!--middle-content-->

  </div> <!--maincontent--> 

</div>  <!--page-->
</body>

这是我的CSS

#cloud {
    float: left;
    padding: 0px;
    margin: 0px;
}
#page {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}

#home {
    float: left;
    padding-left: 59px;
    padding-right: 59px;
    text-align:center;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    padding-top: 37px;
    padding-bottom: 37px;

}
#banner {
    background-color: #78c8f0;
    height: 130px;
}
.navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-decoration: none;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}
.navigation a {
    text-decoration: none;
    color: #000000;
    background-position: center;
}
#maincontent {
    background-color: #A6D2FF;
}


#leftcontent {
    width: 150px;
    display: table;
}
#middle-content {
    width: 400px;
    float: left;
}

Answer 1

试试这个

#leftcontent {
    width: 150px;
    float:left;
}
#middle-content {
    width: 400px;
    float: left;
}

我也添加了

#maincontent:before, 
#maincontent:after{
  clear:both;
  display:table;
  content:"";
}

修复背景颜色

<强> working code is here

Answer 2

您需要浮动#leftcontent，并修复背景，添加clear fix

＆＃13;

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 59px;
  padding-right: 59px;
  text-align: center;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  padding-top: 37px;
  padding-bottom: 37px;
}
#banner {
  background-color: #78c8f0;
  height: 130px;
}
.navigation {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
.navigation a {
  text-decoration: none;
  color: #000000;
  background-position: center;
}
#maincontent {
  background-color: #A6D2FF;
}
.clear:after {
  content: '';
  display: block;
  clear: left;
  height: 0;
}
#leftcontent {
  width: 150px;
  display: table;
  float: left;
}
#middle-content {
  padding-top: 1px;
  width: 400px;
  float: left;
}

＆＃13;

<div id="page">
  <div id="banner" class="clear">
    <div id="cloud">
      <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
    </div>
    <!--cloud-->
    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->

  <div id="maincontent" class="clear">
    <div id="leftcontent">
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">Home</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/catalog.html">About Us</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/calendar.html">Products</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/promotion.html">Contact</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">ABOUT US</a>
      </div>
      <!--navigation-->
    </div>
    <!--leftcontent-->

    <div id="middle-content">
      <h1>Welcome To Bagger</h1>
    </div>
    <!--middle-content-->

  </div>
  <!--maincontent-->

</div>
<!--page-->

＆＃13;

我还在middle-content添加了1px顶部填充以阻止h2边距导致高于maincontent的差距

<强>更新

听起来你的Dreamweaver不支持伪元素，看看这是否能解决你明确的问题：

将css .clear:after更改为：

.clear {
    display:block; 
    height:0;
    overflow:hidden;
    clear:both;
}

然后在上面的html中，找到带有clear类的div并删除该类，然后在这些div的末尾添加一个物理div来查看它是否修复了你的问题：

<div class="clear"></div>

Answer 3

对于您的问题，我有以下解决方案：

#maincontent无法显示其背景，因为它的高度为0.您可以修复它：

#maincontent {
  background-color: #A6D2FF;
  height:250px;
}

#leftcontent必须float:left，middle-content位于#leftcontent

#leftcontent {
  width: 150px;
  display: table;
  float: left;
}

Float不显示

3 个答案: