0

左から右に表示したい3つのDIVを作成しました。

<div id="middle">
     <div id="middleleft"></div>
     <div id="middleleftopenclose"></div>
     <div id="middleright"></div>
</div>

ただし、DIV Middleleftopencloseは、 middleleftの後ではなく、左端に表示されます。何故ですか？

#middle {
    position: relative;
    height: 100%;
}
#middleleft {
    width: 445px;
    float: left;
}
#middleleftopenclose {
    background-color:#2a2729;
    position: absolute;
    height: 100%;
    width: 15px;
    float: left;
}
#middleright {
    height: 100%;
    margin-left: 460px;
}

ありがとう！

4

5 に答える 5

3

Floatが機能しない次のようにposition: absolute.変更してみてくださいposition: relative;

#middleleft {
    width: 445px;
    float: left;
    position: relative;
}
#middleleftopenclose {
    background-color:#2a2729;
    position: relative;
    height: 100%;
    width: 15px;
    float: left;
}
于 2012-11-22T21:30:24.847 に答える
1

position: absoluteコメントで述べたように、と一緒に使用することはできませんfloat。に変更すると、position: relativeほとんど修正されるはずです。私はそれを視覚化するためにフィドルを作成しました。わかりやすくするためにいくつかの色を追加しました。また、に設定し#middleleftましたheight: 100%。そうしないと、正しくフロートしません。これが箱から出してあなたのサイトに当てはまるかどうかはわかりません。

于 2012-11-22T21:30:16.477 に答える
1

フロートを取り外し、display：inline-block;を使用します。

于 2012-11-22T21:20:49.973 に答える
1

これは、ブラウザがすべてのdivを水平方向に収容できないために発生します。つまり、divの幅の合計がページ幅よりも大きくなるためです。div幅を変更してみてください。

于 2012-11-22T21:21:16.180 に答える
0

これを試して

#middle { width: 100% }
#middle div { display: inline-block; width: 33%; }

フロートや相対位置、絶対位置は必要ありません:)

于 2012-11-22T21:37:11.490 に答える