9

私はCSSをいじったり、フロートを理解しようとしたりしています。問題は次のようになります。

CSSフロートオーバーラップ

ご覧のとおり、黄色のボックスは灰色の後ろに浮かんでいて、それを通り過ぎています。ボックス2の直前で停止するにはどうすればよいですか？これが私のコードです：

<style>
/*resests begin*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    /*vertical-align: baseline; */
    font-weight:normal;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
/*resests end*/


body {
    font-size:16px;
    margin:5px;

}

h1 {font-size:2em;}

nav {
    background-color:#ccc;
    padding:5px;
    width:200px;
    height:200px;
    margin:10px;
}

#a {
    background-color:#FFC;
    padding:10px;
}

.r-set {
    padding-left:10px;
    float:right;
}


</style>
</head>

<body>
<h1>Title</h1>

<nav class="r-set">
  <p><a href="#">Two</a></p>
</nav>

<div id="a">
  <h3>One</h3>
</div>

</body>
</html>
4

5 に答える 5

2

要素をフロートさせると、DOMのフローから要素を取り出します。Box Oneと相互作用させるには、BoxOneもフロートする必要があります。

#a {
    background-color: #FFFFCC;
    float: left;
    padding: 10px;
    width: 190px;
}

幅も指定されていることに注意してください。これは、両方のボックスをラッパーに入れて、その幅も指定するためです。

HTML

<div id="wrapper">      
    <h1>Title</h1>
    <nav class="r-set">
        <p><a href="#">Two</a></p>
    </nav>
    <div id="a">
        <h3>One</h3>
    </div>
</div>

CSS

#wrapper{
    width: 445px;
}

要素をフローティングするときはいつでも、このようなラッパーに入れて、いわばDOMに戻すことをお勧めします。これにより、Box2の背後にあるBoxOneレンダリングで発生したような問題を回避できます。

これがjsFiddleですべてをまとめています。ところで、ボックス2をボックス1と完全に同じ高さにしたい場合は、左マージンを取り除いてください。

編集：

BoxTwoを静的およびBoxOneを拡張可能にするには、同じCSSとマークアップを使用する必要があります。Box Oneのfloatプロパティとwidthプロパティを削除し、右マージンを225px（Box Twoの幅から右マージンを引いたもの）にします。これが更新されたjsFiddleです。

于 2013-02-06T04:54:26.363 に答える
1

overflow: hidden;非フローティングボックスに適用します。

于 2020-01-05T16:53:26.017 に答える
0

ボックスに幅を設定する必要があります。正確には、パディングを％に変更する必要があります。

#a {
    background-color:#FFC;
    padding:1%;
    width:58%;
}

.r-set {
    padding-left:1%;
    float:right;
    width:39%;
}

JSフィドルはそれをよりよく示しています：ここに

于 2013-02-06T04:44:29.593 に答える
-1

このリンクを参照してくださいjsfiddle.net/EwC2Z/1/

HTML

<body>

<h1>Title</h1>

    <div>
        <div>
            <nav class="r-set">
                <p><a href="#">Two</a></p>
            </nav>
        </div>
        <div id="a">
             <h3>One</h3>

        </div>
    </div>
</body>

Css

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
/*resests end*/
 body {
    font-size:16px;
    margin:5px;
}
h1 {
    font-size:2em;
}
nav {
    background-color:#ccc;
    padding:5px;
    width:200px;
    height:200px;
    margin:10px;
}
#a {
    background-color:#FFC;
    padding:10px;
    float:left;
    width:310px;
}
.r-set {
    padding-left:10px;
    float:right;
    margin-top:-3px;
}
于 2013-02-06T04:41:40.053 に答える
-1

floatを使用する場合は、floating要素の最後にこれを追加します。（フローティング要素内）。

<div class="clear"> </div>

ここでclear、CSSの定義は次のとおりです。

.clear {
clear: both;
}

または、を使用していない場合はclear、幅x高さを明示的に指定する必要があります。

次のHTML要素がfloatの影響を受けないようにするには、floating要素の<div class="clear"> </div> 後に使用します。

したがって、を使用するclearと、コードは次のようになります。

<nav class="r-set">
  <p><a href="#">Two</a></p>
  <div class="clear"> </div> <!-- added clear -->
</nav>

<div id="a">
  <h3>One</h3>
  <div class="clear"> </div> <!-- added clear -->
</div>

編集：

必要な画面を見ただけです。

#a {
    background-color:#FFC;
    padding:10px;
    float: left; /* added this */
    width: 65%; /* added this too, either give width in % or in pixels */
}
于 2013-02-06T06:08:04.117 に答える