Fatal编程技术网
  • html/
  • Html 浮动不显示

Html 浮动不显示

html css

Html 浮动不显示,html,css,Html,Css,我面临的问题是，当我将float放入我的#中间内容时。浮点数不显示。此外，这也消除了它的背景。我希望中间内容位于#leftcontent的右侧。请帮帮我 <body> <div id="page"> <div id="banner"> <div id="cloud"> <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Clo

我面临的问题是，当我将float放入我的
#中间内容时。浮点数不显示。此外，这也消除了它的背景。我希望
中间内容
位于
#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>


试试这个


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


我还补充说


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


固定背景色


您需要浮动
#leftcontent
，要修复背景，请添加一个



#云{
浮动：左；
填充：0px；
边际：0px；
}
#页面{
宽度：800px；
右边距：自动；
左边距：自动；
}
#家{
浮动：左；
左侧填充：59px；
右边填充：59px；
文本对齐：居中；
左：自动；
顶部：自动；
右：自动；
底部：自动；
填充顶部：37px；
垫底：37px；
}
#横幅{
背景色：#78c8f0；
高度：130像素；
}
.导航{
字体系列：Arial、Helvetica、无衬线字体；
字号：18px；
文字装饰：无；
填充：10px；
字体大小：粗体；
文本对齐：居中；
}
.导航a{
文字装饰：无；
颜色：#000000；
背景位置：中心；
}
#主要内容{
背景色：#A6D2FF；
}
.清楚：之后{
内容：''；
显示：块；
清除：左；
身高：0；
}
#左内容{
宽度：150px；
显示：表格；
浮动：左；
}
#中间内容{
垫面：1px；
宽度：400px；
浮动：左；
}



家
欢迎来到巴格

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


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

    #主要内容{
背景色：#A6D2FF；
高度：250px；
}

    

  • #leftcontent
    必须具有
    浮动：left
    ，因此
    中间内容
    位于
    #leftcontent
    • 

    #leftcontent{
宽度：150px；
显示：表格；
浮动：左；
}

    以防有人需要，它可以工作！！但是当我按照你的建议编辑代码时，主要内容的背景色消失了。我该怎么办？请检查我在#maincontent:before，#maincontent:after中添加了一些css，这将解决您的问题我已经将您的html和css复制到我的dreamweaver，但maincontent的底色仍然缺失。应该怎么做？dreamweaver是否支持
    ：在
    psuedo选择器之后？我不确定，但我使用CS4 oneok，不确定是否支持，但它应该支持。请参阅上面的编辑，看看这是否修复了itAh ok，看起来cs4已经很旧了（2008年发布），所以可能不会支持after。你应该尝试更新它，因为你正在用你将能够使用的css限制你自己

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