Question

我有一个非常简单的HTML / CSS代码，其中包含父div pageWrapper，我有header，rightPanel。我有pageWrapper的边界，因此header和rightPanel都应显示在边界内。

当我在Visual Studio设计器窗口中看到HTML呈现时，它显示正确的输出，rightPanel确实在边框下。但在IE / Chrome / Firefox中，rightPanel并未进入pageWrapper的边界。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #pageWrapper {
            font: 14px/11.4;
            width: 1000px;
            background-color: #FFF;
            margin-left: auto;
            margin-right: auto;
          border: 5px solid black;
        }

        #header {
            height: 127px;
            width: 1000px;
        }

        #logo {
            position: relative;
            left: 15px;
            top: 4px;
        }

        #blogSlogan {
            position: relative;
            width: 270px;
            left: 685px;
            top: -125px;
        }

        #searchBox {
            position: relative;
            left: 685px;
            top: -70px;
            width: 290px;
        }

        #rightPanel {
            position:relative;
            background-color: red;
            height: 600px;
            width: 500px;
            float: right;
        }
    </style>
</head>
<body>
    <div id="pageWrapper">

        <div id="header">
            <img src="Images/linkedin.jpg" alt="Social voice logo"
                height="109px" id="logo" />
            <p id="blogSlogan">Your source for mobile/media marketing.</p>
            <div id="searchBox">
                <input type="text" name="search" size="25" value="Search" />
                <input type="submit" value="SEARCH" />
            </div>
        </div>
        <!-- End header-->

        <div id="rightPanel">

        </div>
        <!-- End rightPanel-->
    </div>
    <!-- End pageWrapper-->

</body>
</html>

enter image description here

Answer 1

那是因为你已经浮动了右侧面板，但是在它之后没有任何东西可以清除浮动。

我考虑更多地了解using floats。

您需要添加以下内容：

 #pageWrapper:after {
     clear: both;
     content: " ";
     display: block;
     visibility: hidden; 
     height: 0; 
 }

或者如果您需要支持低于IE8（:after不支持），那么您需要在浮动元素之后添加额外的div并确保它有CSS clear: both;

DEMO

Answer 2

你的问题的答案非常简单。您将float:right应用于红色div，但其容器未浮动。根据盒子型号规范，这会生成您看到的行为。

你应该花一些时间来理解盒子模型是如何工作的，position和float的不同值如何影响你的风格，因为我看到你使用了某个位置：相对而且它实际上没有＆＃39有意义地看看html和css的其余部分。

Answer 3

如果将#rightpanel浮动CSS属性设置为right，则会将其从HTML流中拉出。您需要在#pageWrapper的末尾添加一个带有CSS属性clear: both的元素，这样它才能使主div扩展到所有浮动元素结束的点。使用CSS执行此操作的更简洁方法是将此行添加到CSS：

#pageWrapper:after {
  content: “ ";
  display: block;
  clear: both;
}

Answer 4

只需将overflow：hidden属性添加到父div即可获得答案感谢

Answer 5

从右向右更改右侧面板：500px;会工作

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dd</title>
    <style type="text/css">
        #pageWrapper {
            font: 14px/11.4;
            width: 1000px;

            background-color: #FFF;
            margin-left: auto;
            margin-right: auto;
          border: 5px solid black;
        }

        #header {
            height: 127px;
            width: 1000px;
        }

        #logo {
            position: relative;
            left: 15px;
            top: 4px;
        }

        #blogSlogan {
            position: relative;
            width: 270px;
            left: 685px;
            top: -125px;
        }

        #searchBox {
            position: relative;
            left: 685px;
            top: -70px;
            width: 290px;
        }

        #rightPanel {
            position:relative;
            background-color: red;
            height: 600px;
            width: 500px;
            right:-500px;

        }
    </style>
</head>
<body>
    <div id="pageWrapper">

        <div id="header">
            <img src="Images/linkedin.jpg" alt="Social voice logo"
                height="109px" id="logo" />
            <p id="blogSlogan">Your source for mobile/media marketing.</p>
            <div id="searchBox">
                <input type="text" name="search" size="25" value="Search" />
                <input type="submit" value="SEARCH" />
            </div>
        </div>
        <!-- End header-->

        <div id="rightPanel">

        </div>
        <!-- End rightPanel-->
    </div>


</body>

Answer 6

我已更新你的html和css

<body>
<div id="pageWrapper">
    <div class="secondWrapper">
    <div id="header">
        <img src="Images/linkedin.jpg" alt="Social voice logo"
            height="109px" id="logo" />
        <p id="blogSlogan">Your source for mobile/media marketing.</p>
        <div id="searchBox">
            <input type="text" name="search" size="25" value="Search" />
            <input type="submit" value="SEARCH" />
        </div>
    </div>
    <!-- End header-->

    <div id="rightPanel">

    </div>
    <!-- End rightPanel-->
    </div> <!-- End secondwrapper-->
</div>
<!-- End pageWrapper-->

</body>

我所做的是包含在pagewrapper中的另一个包装器，并给出了float和border

这是css

    #pageWrapper {
        font: 14px/11.4;
        width: 1000px;
        background-color: #FFF;
        margin-left: auto;
        margin-right: auto;


    }
 .secondWrapper{
    float:left;
    border: 5px solid black;
    width:100%:

 }

    #header {
        height: 127px;
        width: 1000px;
        float:left;
    }

    #logo {
        float:left;
        margin:10px 0 0 10px;
    }

    #blogSlogan {
       float:right;
        width: 270px;

    }

    #searchBox {
        float:right;
        clear:right;

    }

    #rightPanel {
        background-color: red;
        height: 600px;
        width: 500px;
        float: right;
    }

为什么子div没有进入父div的边界？

6 个答案: