35

私の目標は、2 つ<div>の を並べて表示し、両方のコンテンツを<div>上部に配置することです。<div>2番目の長いテキストが最初のテキストの下に折り返されないようにします。

<div>最後に、マークアップをさまざまな幅で機能させる必要があるため、秒の幅を設定したくありません。

サンプルのマークアップは以下とhttp://jsfiddle.net/rhEyM/にあります。

CSS

.left-div {
    float: left;
    width: 100px;
    height: 20px;
    margin-right: 8px;
    background-color: linen;
}
.right-div {
    float: left;
    margin-left: 108px;
    background-color: skyblue;
}​

HTML

<div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line
    up at the top, <b>[B]</b> Long text in right-div should not wrap
    underneath left-div, and <b>[C]</b> I do not want to specify a
    width of right-div. I don't want to set the width of right-div
    because this markup needs to work within different widths.
</div>

</p>

4

3 に答える 3

23

動作させるために、2 番目の div からフロートを削除しました。

http://jsfiddle.net/rhEyM/2/

于 2012-04-04T06:50:13.027 に答える
9

これを試してください:( http://jsfiddle.net/TpqVx/ )

.left-div {
    float: left;
    width: 100px;
    /*height: 20px;*/
    margin-right: 8px;
    background-color: linen;
}
.right-div {

    margin-left: 108px;
    background-color: lime;
}​​

<div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths.
</div>
<div style='clear:both;'>&nbsp;</div>

ヒント ：

  • float:left一番左の divのみで使用してください。
  • を使用する本当の理由はありませんheightが、とにかく...
  • <div 'clear:both'>&nbsp;</div>最後の div の後に使用することをお勧めします。
于 2012-04-04T06:50:28.737 に答える