web-dev-qa-db-ja.com

2つの<div>を並べて表示

私の目標は、2つの<div>sを並べて、両方の<div>sのコンテンツを上部に並べて表示することです。 2番目の<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>

htmlcsscss-float
32
Jonathan Wood

2つ目のdivからフロートを削除して機能させました。

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

21
Ray Toal

Html5の新しい標準であるFlexを使用してみてください。

http://jsfiddle.net/maxspan/1b431hxm/

<div id="row1">
    <div id="column1">I am column one</div>
    <div id="column2">I am column two</div>
</div>

#row1{
    display:flex;
    flex-direction:row;
justify-content: space-around;
}

#column1{
    display:flex;
    flex-direction:column;

}


#column2{
    display:flex;
    flex-direction:column;
}
35
maxspan

これを試してください：（ 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>

ヒント：

  • 一番左のdivでfloat:leftを使用するだけですonly。
  • heightを使用する本当の理由はありませんが、とにかく...
  • 最後のdivの後に<div 'clear:both'>&nbsp;</div>を使用することをお勧めします。
9
Dr.Kameleon