css - コンテナー内の複数の要素をフローティングする

Question

私はこれを得た：

デモ。

そして、私はこの結果が欲しいです:

私はこれまでに得ました：

デモ。

Answer 1

柔軟な方法でこれを行うには、2 つの方法があります。どちらもフロートの必要性をなくし (およびフロートをクリアする)、JavaScript を使用する必要もありません。

1 つ目は、flexbox を使用することです。ここでの利点は、要素が 1 つの行に快適に収まる十分なスペースがない場合、要素が適応することです。マイナス面は、IE10 がそれをサポートする IE の最初のバージョンであることです。フォールバックとして、適用されdisplay: inline-blockた各要素で使用する必要があります。flex

http://jsfiddle.net/n4Yzc/7/

.always-visible {
    display: flex; /* prefixed attribute: -moz-flex, -webkit-flex */
    align-items: stretch; /* prefixed property: -moz-align-items, -webkit-align-items */
    flex-flow: row wrap; /* prefixed property */
}

.toggle-me {
    background-color: green;
    flex: 1 1 5em; /* prefixed property */
} 

.name-mail {
    background-color: red;
    flex: 1 1 8em; /* prefixed property */
}

.description {
    background-color: yellow;
    flex: 2 1 50%; /* prefixed property */
}

.favourite-food {
    background-color: orange;
}

display: table2 つ目は、プロパティを使用することです。このソリューションは十分にサポートされていますが (IE8+)、幅の狭いデバイスでは押しつぶされたように見えます。

http://jsfiddle.net/n4Yzc/5/

.always-visible {
    display: table;
}

.toggle-me {
    background-color: green;
    display: table-cell;
} 

.name-mail {
    background-color: red;
    display: table-cell;
}

.description {
    background-color: yellow;
    display: table-cell;
}

.favourite-food {
    background-color: orange;
}

Answer 2

必要な出力については、フィドルを参照してください：http: //jsfiddle.net/n4Yzc/2/

.toggle-me {
background-color: green;
  float:left;
    height:100px;
}

.name-mail {
background-color: red;
    float:left;
    height:100px;
}

.description {
background-color: yellow;
    float:left;
    width:67%;
}

.favourite-food {
background-color: orange;
}

更新されたフィドル：http： //jsfiddle.net/n4Yzc/6/

幅toggle-meおよびname-maildivに基づくdescriptiondivの可変幅。

Answer 3

次のように高さ toggle-me, name-mailとdescriptionクラスを調整します

 .toggle-me {
    background-color: green;
    float:left;
      height:150px;
    }

    .name-mail {
    background-colo

        r: red;
        float:left;
          height:150px;
        }

        .description {
        background-color: yellow;
          height:150px;
        }

        .favourite-food {
        background-color: orange;
        }