Css 在容器中浮动多个元素

我收到了这个：

我想要这个结果：

我走了这么远：

---

.

有关所需输出，请参见小提琴：

更新的小提琴：

---

宽度基于切换我和姓名邮件div的描述div的可变宽度。调整

切换我、姓名邮件和
描述类的高度，如下所示

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

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

首先是使用flexbox。这里的优点是，如果没有足够的空间让元素舒适地排在一排，它们就会适应。缺点是IE10是IE支持它的第一个版本。作为备用方案，您需要在应用了
flex
的每个元素上使用
display:inline block


第二种方法是使用
display:table
属性。该解决方案得到了很好的支持（IE8+），但最终在更窄的设备上看起来像被压扁了一样


看看我的答案，让我知道我是否落后了一些。看看我更新的小提琴，宽度可变，没有任何问题。问题是，这个解决方案使用的是一个神奇的数字（67%）。当电子邮件字符串比给定的示例长时会发生什么情况（这种情况很容易发生？）。不过我不希望使用javascript。如果您在文本元素上设置静态高度，那么如果文本比您计划的长度长，则会出现溢出问题。这看起来像是某种个人资料页面元素，可能由用户编辑。第二种方法非常优雅，很好！我在主体上加了一个最小宽度以避免极端挤压。最好使用媒体查询，这样只有当窗口有
（最小宽度：40em）
或类似的内容时，才会设置
显示：表
属性。这样，对于窄设备，它垂直显示，对于宽设备，它水平显示。
 .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;
        }

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

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