0

p1 つのタグを左に、別のタグを右にフロートさせようとしpています。親と同じ div を共有します。私はこれを達成することができません。右のテキストは水平方向に正しく配置されていますが、垂直方向には左のテキストの下にあります。コードは次のとおりです。

<div>
    <p id="t1">Text1</p>
    <p id="t2">Text2</p>
</div>

div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}

これは私が得ている結果です: http://jsfiddle.net/JJB2s/ t1 テキストを左にフロートさせようとすると、両方とも同じ垂直レベルにありますが、本来よりもはるかに低いように見えますなれ。なぜこのようなことが起こるのか、どうすれば解決できるのかよくわかりません。どなたか教えていただけないでしょうか。前もって感謝します！

4

5 に答える 5

1

フロートを使用してこれを実装します。現在、両方ともフローティングしておらず、インライン表示を使用してそれらを並べようとしています。これを修正する更新されたフィドルは次のとおりです。

http://jsfiddle.net/JJB2s/13/

CSS を以下に再掲します。

div {
    border: 1px solid red;
    overflow: hidden;
}

#t1 {
    border: 1px solid green;
    float: left;
}

#t2 {
    border: 1px solid blue;
    float: right;
}

overflow: hiddenコンテナにはフロートが含まれているため、コンテナを配置すると崩壊しません。実際にオーバーフローを非表示にしたくない場合は、 clearfixを使用してこれと同じ効果を達成できます。

于 2013-10-03T18:47:41.207 に答える
0

私はジェフ・エスカランテの答えが好きでした（私も賛成しました）が、同じ効果を持つ別の解決策があります。それは別のアプローチを示す目的のためだけです..彼の答えを使用してください。

ここにワーキングフィドルがあります

div {
    border: 1px solid red;
}
div:after
{
    content: '';
    clear: both;
    display: block;
}
#t1 {
    border: 1px solid green;
    float: left;
}
#t2 {
    border: 1px solid blue;
    float: right;
}
于 2013-10-03T21:14:54.147 に答える
0

マージンとパディングを 0 に設定します。http://jsfiddle.net/JJB2s/15/

div, #t1, #t2{
margin:0px;
padding:0px;
}
div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
    float:left;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}
于 2013-10-03T19:19:14.467 に答える
0

これは、2 つの段落があるためです。デフォルトでは、HTML は各段落を新しい行に表示します。はい、margin-top: 0px; を設定してこれを変更します。

于 2013-10-03T18:47:32.690 に答える
0

margin-top:0px; を追加します。右の方へ

このような

#t2 {
border: 1px solid blue;
display: inline;
margin-top:0px;
float: right;
}
于 2013-10-03T18:41:55.673 に答える