0

私は本当に理解していない

<div style="clear:both"></div>

Chrome では動作しません。私はこのレイアウトを持っています:

<div id="header">...</div>
<div id="content">
    <div id="col1">...</div> <!-- float left -->
    <div id="col2">...</div> <!-- float left -->
    <div id="col3">...</div> <!-- float left -->
    <div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>

そのためclear:both、フッターの前および/または col3 の後に使用しました。

IE7でも動作しませんが、現時点ではあまり気にしません。

誰でも私を助けてもらえますか？

さらに情報を追加します。

#content {
    padding-top: 19px;
    display: block;
}

#col1,
#col3 {
    width: 21%;
    position: relative;
    padding: 0 0 1em 0;
    float: left;
}

#col2 {
    width: 58%;
    position: relative;
    padding: 0 0 1em 0;
    float: left;
}

解決済み: 申し訳ありません....私があなたに提供した情報はまだ十分ではありません! 問題はコラムの内容!! col1 には、height:40px の div があったため、コンテンツが 40px をはるかに超えていたとしても、ブラウザではオーバーフローがないように見えました...説明で明確になったことを願っています..しかし、Tom Sarduy の解決策は面白いけどIEでは動かない…昨日も今日もやってみたけどスタイルが取れてないみたい…ブラウザの開発者ツールで見たけど適用されない

4

6 に答える 6

1

clear: どちらも Chrome/IE7 で問題なく動作します。適切な使用方法については、この例を参照してください。http://jsfiddle.net/turiyag/LvMRY/2/

あなたのサイトへのリンク、または完全な実際のコードを投稿できますか?

CSS:

div {
    border: 1px solid black;
}

.floaty {
    height: 50px;
    width: 50px;
    float: left;
    background: green;
}

.cleary {
    height: 100px;
    width: 200px;
    clear: both;
    background: cyan;
}

HTML

<html>
    <head>
    </head>

    <body>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
        <div class="cleary">Cleary</div>
        <div class="floaty">Floaty</div>
        <div class="floaty">Floaty</div>
    </body>
</html>
于 2013-02-06T10:24:37.553 に答える
1

実際に動作します。あなたはそれを適切に使用していないだけです。

以下の要素を使用した場合clear:bothのみ効果があります。たとえば、

floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left

「|」の間の各テキストを想像してみてください ブロック要素です。上記の例のように要素をフロートさせて clear を使用すると、コードは上記のように表示されるはずです。

実際の例については、こちらを確認してください: 属性を削除してみてくださいclear。ブラウザが「DOES NOT WORK」を配置する方法を確認できます。

http://jsfiddle.net/6VjSL/

于 2013-02-06T10:27:28.473 に答える
0

セマンティックには、このためにクラスを使用する方が適切です。正しい方法は次のとおりです。

HTML

<div id="header">...</div>
<div id="content" class="clearfix">
    <div id="col1">...</div> <--- float left
    <div id="col2">...</div> <--- float left
    <div id="col3">...</div> <--- float left
    <div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>

CSS:

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

はい、醜いですが、非常にうまく機能し、デザイナーがオーバーフローを隠したり、幅やフローティング (ほぼ) すべてを設定したりせずにフロートをクリアして、仕事を終わらせることができます。

于 2013-02-06T10:27:49.263 に答える
0

その後、どこでも動作しませんか? :o)

あなたはおそらくdivにも適用しfloat:leftていclear:bothます...

これはすべてのブラウザーで機能します。

http://jsfiddle.net/kKwkd/

HTML

<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
    <div id="col1">bbb</div> <!-- float left -->
    <div id="col2">ccc</div> <!-- float left -->
    <div id="col3">ddd</div> <!-- float left -->
    <div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>

CSS

#header, #footer{    
    border: 1px dashed blue;
}

#col1,#col2,#col3{
    float: left;    
    border: 1px solid red;
    padding: 50px;
    margin: 10px;
}
于 2013-02-06T10:38:11.957 に答える