1

div“ headerlinks ”浮动通过 div“ header ”的左下角，但如果我重新加载页面，则 div 位于正确的位置。我不知道是我的 CSS 还是浏览器错误。我正在使用Chrome 29.0.1547.62 (Official Build 219432) Mac OS X.

演示

<div id="header">
    <a href="/">
    <img src="blackdiamondcraft.com/title.png" alt="Home"></a>
    <div id="headerlinks">
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a>
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a>
    </div>
</div>

CSS

.boxlink {
    background-color: #cccccc;
    border: solid #999999 1px;
    padding: 5px;
}
#header {
    background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
    background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
    border-radius: 10px;
    padding: 3px;
    border: solid 4px black;
    margin: 4px;
}
#headerlinks{
    float: right;
    padding: 10px;
    background-color: #66ffcc;
    position: inherit;
    border-radius: 7px;
    border: solid #000 1px;
}
4

1 回答 1

0

您需要清除浮动，overflow: hidden;在父元素上使用

#header {
   background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-                     stop(100%,#91e842));
   background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
   border-radius: 10px;
   padding: 3px;
   border: solid 4px black;
   margin: 4px;
   overflow: hidden;
}

演示

甚至更好的方法是使用下面的代码片段使用自清除父元素

.clear:after {
    clear: both;
    display: table;
    content: "";
}

演示

说明：当您将元素向左或向右浮动时，父元素会折叠，因为它不知道height您的父元素是什么，为了解决这个问题，您需要使用我提供的上述解决方案清除浮动，除此之外，你也可以使用clear: both;，为了更好的理解，你可以参考我的回答here或者here。

于 2013-09-07T04:41:39.423 回答