Question

有谁知道为什么我的'容器'div没有显示其父div的白色bg颜色？我从CSS机身设置中获得黑色（我的例子中的Lime用于更好的描述）bg-color。

请原谅邋sty的造型。我尽力减少代码并显示相关内容。顺便说一句，我已经尝试制作'容器'div而且它的孩子divs'样式bg颜色白色;它仍然无法正常工作。当我给最高div一个大的height属性（比如1000px）时，它显示白色到那一点，但我想我不必这样做。它应该是动态的：当div内的控件扩展时，div的高度也应该扩展。我有很多这样的页面，但没有这个问题.. 但是这是我尝试列div的唯一pg。当我的列的'容器'div开始时，它就会发生（见图）。而且，这发生在FF和铬。它在IE中工作正常

<head runat="server">
  <title>Loaner Transfer</title>
  <link rel="stylesheet" type="text/css" href="../styles/BodyLayout.css" />
  <link rel="stylesheet" type="text/css" href="../styles/columns.css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script language="javascript" type="text/javascript">
    ....
  </script>
</head>
<body>
  <center>
  <div style="text-align:left; width:1160px; background-color:White; border-bottom-width:25px;">
  <div id="divBody">
    <form id="form1" runat="server">
      <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
      </ajx:ToolkitScriptManager>
      <img src="../images/_Logo.gif" alt="Logo" /><br />
      <UI:Header ID="UIHeader" runat="server" />
      <UI:Menu ID="UIMenu" runat="server" />
      <center>
        <h1>Transfer Loaned Items</h1>
        <asp:Label ID="lblStatus" runat="server" ForeColor="red"></asp:Label>
        <br />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ISO" />
        <asp:ValidationSummary ID="ValidationSummary3" runat="server" ValidationGroup="add" />
        <asp:ValidationSummary ID="ValidationSummary2" runat="server" ValidationGroup="header" />
      </center>
      <br />
      <div id="container" style="width:1140px;">
        <div id="col1" style="width:400px;">
          <h2 style="text-decoration:underline; text-align:center;">Search and select items to transfer</h2>
          <div style="margin-left:25px;">  
            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Pull ISO"></asp:Label>
            <asp:CustomValidator ID="CVSearch" runat="server" ErrorMessage="Invalid ISO entry."
              ControlToValidate="txtSearchISO" ValidationGroup="ISO" ValidateEmptyText="true"
              ClientValidationFunction="CheckMyText">*</asp:CustomValidator>
            <asp:TextBox ID="txtSearchISO" runat="server" Width="50px"></asp:TextBox>
            <asp:Button ID="btnSearchISO" runat="server" Text="Go!" ValidationGroup="ISO" OnClick="btnSearchISO_Click" />
            <asp:Label ID="lblHidISO" runat="server" Text="-1" Visible="false"></asp:Label>
            <br />
            <br />
            <table>
            .....
            </table>
            <br />
          <center>
            <asp:DataGrid.............................</asp:DataGrid>
          </center>
        </div>
        <div id="col2outer" style="width:710px;">  
        <center>
        <!--tables, controls, etc-->
        </center>
      </center>     
        </div>
      </div>
    </form>
  </div>
  </div>
  </center>
</body>

这是我的CSS：

body
{
    background-color:Black;
}
body.comp
{
    background-color:#F5FCFF;
}
#divBody
{
    margin-left:25px;
}
#divTrans
{
    margin:15px;
}

#container #col1
{
    float: left;
}

#container #col2outer
{
    float: right;
}

#container #footer
{
    text-align:center;
    float: left;
    width: 870px;
}

这是一个ss： enter image description here

Answer 1

看起来您只需要clear your floats。

您可以将overflow: hidden添加到#container（或者#divBody）来执行此操作。

有关清除花车的更多信息：

学习如何以及何时清除浮动是CSS的重要组成部分。如果你能尽快掌握它，你会为自己省去很多困惑。

Answer 2

你有没有尝试过：

#container {
    overflow: auto;
}

为什么这可以解决问题，请参阅：

The CSS Overflow Property

设置的另一个流行用途溢出，奇怪的是，浮动结算。设置溢出不会清除元素上的浮动，它自清零。

据我所知，IE默认使用块元素上的这种行为，而FF / Webkit（Chrome / Safari）则没有。

All About Floats - 血腥细节，请参阅“清除浮动技术”一节

Answer 3

我认为这是因为你的漂浮物。你可以试试的是添加

<div class="clearFloat"></div>

在容器div的结束标记下。

然后在你的CSS中

div.clearFloat { clear: both; }

FF / chrome背景颜色样式

3 个答案: