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;理解を深めるために、ここまたはここで私の回答を参照してください。

于 2013-09-07T04:41:39.423 に答える