css - 子divをその前のdivの右と「上」に浮かせるにはどうすればよいですか?

Question

内部に 4 つの div を持つ親 div を作成しました。最初の div (グレー) には画像が含まれ、2 番目 (赤) はこの div の下に説明が表示されます。他の 2 つの div は、これら 2 つの右側に配置されます。

これは私が得ることができる最も近いものです:

3番目/4番目のdivを一番上に置きたいです。マイナスのトップ マージンを使用することもできますが、自然に上がるようにしたいと考えています。また、divの順序を並べ替えることができません。これは基本的な問題/誤解ですが、Google の定義を十分に明確にすることはできません。

これが私のhtmlです：

<div id="container">

<div class="imgbox"></div>

<div class="pick" id="first"></div>

<div class="pick" id="second"></div>

<div class="pick" id="third"></div>

</div>

CSS は次のとおりです。

#container {
        width: 440px;
        height: 212px;
        border: 1px solid grey;
    }

    div {
        border: 1px solid black;
        display: block;
    }

    .imgbox {
        width: 218px;
        height: 100px;
        float: left;
        clear: none;
        background-color: grey;
    }

    .pick {
        width: 218px;
        height: 100px;
    }

    .pick#first {
        float: left;
        clear: left;
        background-color: red;
    }

    .pick#second {
        float: left;
        background-color: blue;
    }

    .pick#third {
        float: right;
        clear: right;
        background-color: purple;
    }

Answer 1

共通の CSS を使用して、両側を div でラップするだけです。

HTML:

<div id="container">

<div class="l">
<div class="imgbox">0</div>
<div class="pick" id="first">1</div>
</div>

<div class="l">
<div class="pick" id="second">2</div>
<div class="pick" id="third">3</div> 
</div>

</div>

-

CSS:

#container {
        width: 440px;
        height: 212px;
        border: 1px solid grey;
    }

    div {
        border: 1px solid black;
        display: block;
    }

.l { width: 218px; float: left; }

    .imgbox {
        width: 218px;
        height: 100px;
        background-color: grey;
    }

    .pick {
        width: 218px;
        height: 100px;
    }

    .pick#first {
        background-color: red;
    }

    .pick#second {
        background-color: blue;
    }

    .pick#third {
        background-color: purple;
    }

デモはこちら

Answer 2

divまず、左側にある s を 1 つのコンテナーにラップdivし、右側にある s を別のコンテナーにラップする必要があります。

<div id="container">
    <div id="left">
        <div class="imgbox"></div>
        <div class="pick" id="first"></div>
    </div>
    <div id="right">
        <div class="pick" id="second"></div>
        <div class="pick" id="third"></div>
    </div>
</div>

float次に、それぞれから個々の割り当てを削除し、div代わりに and に割り当てること#rightができ#leftます。

#left {
    float: left;
}
#right {
    float: right;
}

最後に、正しい幅を考慮する必要があります。440px#containerのスペースがあります。各子divには 218px が割り当てられます。ただし、これらの各divs には両側に 1 ピクセルの境界線もあり、218 + 2(1) = 220 ピクセルのスペースを占有します。#imgboxとの幅.pickを 216px に縮小します。

この jsFiddleですべてをまとめて見ることができます。

Answer 3

左側のすべての DIV をコンテナー div に入れ、左側にフロートします。次に、右側の DIV をすべてコンテナーに入れ、右にフロートさせます。

andの幅も指定する必要がある場合が.left_sideあり.right_sideます。

HTML:

<div id="container">
 <div class="left_side">
  <div class="imgbox"></div>
  <div class="pick" id="first"></div>
 </div>

 <div class="right_side">
  <div class="pick" id="second"></div>
  <div class="pick" id="third"></div>
 </div>
</div>

CSS:

#container {
    width: 440px;
    height: 212px;
    border: 1px solid grey;
 }

div {
    border: 1px solid black;
    display: block;
}

.left_side {
    float:left;
}

.right_side {
    float:right;
}

.imgbox {
    width: 218px;
    height: 100px;
    float: left;
    clear: left;
    background-color: grey;
}

.pick {
    width: 218px;
    height: 100px;
}

.pick#first {
    float: left;
    clear: both;
    background-color: red;
}

.pick#second {
    float: left;
    background-color: blue;
}

.pick#third {
    float: right;
    clear: right;
    background-color: purple;
}

Answer 4

2 つのサブコンテナーを作成し、それらをフロートします。

<div id="container">
  <div class="sub-container">
    <div class="imgbox"></div>
    <div class="pick" id="first"></div>
  </div>
  <div class="sub-container">
    <div class="pick" id="second"></div>
    <div class="pick" id="third"></div>
  </div>
</div>



.sub-container{
  margin: 0;
  padding:0;
  display: inline-block;
  float: left;
 }