2

私はこのHTMLの断片を持っています:

<style>
    #top, #left, #right
    {
        border: 1pt solid silver;
        margin: 3px;
    }
    #left
    {
        float: left;
        width:50%;
    }
    #right
    {
        float: right;
        width:50%;
    }
</style>
<div>
    <div id="top">Text</div>
    <div id="left">Text</div>
    <div id="right">Text</div>
</div>

「左」と「右」の div が画面の幅全体を占めるようにしたいので、幅をそれぞれ 50% に設定します。

何らかの理由で、「左」と「右」の div が重なっています。「右」の div が「左」の div の下にあります。これらの div を並べて表示し、画面の幅全体を占めるようにスタイルを設定する正しい方法は何ですか。

ありがとう。

4

5 に答える 5

2

それぞれが 50% を占め、4 つの 3px マージンを追加する必要があるため、それらを揃えるのに十分なスペースがないため、合計は 100% + 12px になり、揃えることができません。

于 2012-08-13T14:44:00.413 に答える
1

http://jsfiddle.net/ER8pR/1/を参照してください

CSS:

   #top, #left>div, #right>div
    {
        border: 1pt solid silver;
        margin: 3px;
    }
    #left
    {
        float: left;
        width:50%;
    }
    #right
    {
        float: right;
        width:50%;
    }

HTML:

<div>
    <div id="top">Text</div>
    <div id="left"><div>Text</div></div>
    <div id="right"><div>Text</div></div>
</div>

#left問題は、との合計幅#topが

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

あなたの場合、3px+1px+0+50%+0+1px+3px= 50% + 8px、したがって、それらを合計すると100% + 16px、 よりも大きい が得られます100%。

<div>すべてのマージン、パディング、および境界線を削除し、それらの内部に必要なマージン、パディング、および境界線を使用して新しいものを作成することで修正できますwidth:auto。

于 2012-08-13T14:44:50.970 に答える
0

これは、境界線と余白が 50% + 左側の 1px と右側の 1px が 50% 以上に等しいためです。div が 50% であることを確認するために
使用します。この例を参照してくださいhttp://jsfiddle.net/zvMTN/box-sizing: border-box;

于 2012-08-13T14:44:53.830 に答える
0

あなたが抱えている問題は、これらの div に境界線とマージンを設定しているため、幅 50% で横に並んでいないことに注意してください。固定幅のコンテナー内で作業していない場合は、おそらく幅に 48% などを使用する必要があります。

于 2012-08-13T14:45:01.983 に答える
0

追加：

display:inline-block;

あなたの #left と #right に..

div はブロックであり、幅が指定されていても、行全体を占めます! インラインブロックにして、水平方向にもスタックするようにします

于 2012-08-13T14:44:08.383 に答える