0

「float: left」を使用して何百回も行ったように、2 つの div を隣り合わせに配置しようとしていましたが、単に起こっていません。2 番目の div は最初の div の下にあります。

コードは次のとおりです。

<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1"  class="greybox">
    Right
</div>

<div id="box2" class="greybox">
Left
</div>
</div>

そしてCSS：

#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}

#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}

どんな助けでも大歓迎です。

4

6 に答える 6

3

「ラッパー」ID を囲む二重引用符がありません。

私はあなたのコードからフィドルを作成しようとしたことでこれを発見し、エラーを強調しました. （ヒント：次回は私たちのためにフィドルを作ってください）

CSS にもいくつかのエラーがあり、幅はすべて奇妙でした。

修理済み：

<div id="wrapper" style="overflow: hidden; width: 1000;">
        <div id="box2" class="greybox">Left</div>
    <div id="box1" class="greybox">Right</div>

</div>

#box1 {
    margin-top: 70;
    margin-left: 85;
    width: 200px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    overflow: hidden;
}
#box2 {
    margin-top: 70;
    margin-left: 30;
    width: 40px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    overflow: hidden;
    float: left;
}

両方のボックスを左にフロートさせて並べるか、一方を右にフロートさせることができます。

于 2013-09-19T23:46:49.807 に答える
1

通常、これは、2 番目の要素の幅が親要素内で水平方向に収まらない場合に問題になります。グレーボックス クラスはパディングを追加しますか?

また、貼り付けでは、ラッパー ID に引用符がありません。これにより、インラインではなくスタイルシートインクルードを介してスタイルが設定されている場合、親に幅がなくなり、説明した問題が発生します。

また、box1 スタイルにはパディングに構文エラーがあります。以下のすべてのスタイルは有効ではありません。これはあなたの修正になるはずです。

于 2013-09-19T23:49:34.073 に答える
1

なぜ何かが起こるのですか？アイテムのオートフロートはそのままです。

多分あなたはそうするつもりです

float: right;

これを試してみてください^^

于 2013-09-19T23:46:39.290 に答える
0

なぜ、overflow:hidden を #box1 と #box2 に入れるのですか? {overflow:hidden;} の使い方を知っていますか

あなたはすでにオーバーフローを入れています：メインラッパーに隠されています

これを見る

<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1"  class="greybox">
    left
</div>

<div id="box2" class="greybox">
Right
</div>
</div>

そしてCSS

 #box1 {
    margin-top: 70px;
    margin-left: 85px;
    width: 440px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    background:orange;

    }

    #box2 {
    margin-top: 70px;
    margin-left: 30px;
    width: 20px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    background:green;
    float: left;
    }

jsfiddleを参照してください

于 2013-09-20T03:57:57.150 に答える
0

そのコードをクリーンアップする必要があります。多くのエラー、行方不明 (px)、セミコロン、引用符など...

<div id="wrapper" style="overflow: hidden; width: 1000;">
    <div id="box1"  class="greybox">Left</div>
    <div id="box2" class="greybox">Right</div>
</div>

#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px;    /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}

#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}

デモ: http://jsfiddle.net/ZFTzY/5/

于 2013-09-21T06:38:43.477 に答える