css - 在容器中浮动多个元素

Question

我懂了：

演示。

我想要这个结果：

我做到了这一点：

演示。

Answer 1

有两种方法可以灵活地做到这一点。两者都消除了对浮点数（和清除浮点数）的需求，并且都不需要 JavaScript 来实现。

首先是使用flexbox。这里的好处是，如果没有足够的空间让元素舒适地放在一排，它们会适应。缺点是 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: table属性。这个解决方案得到了很好的支持（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-mail div的描述div的宽度可变宽度。

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;
        }