CSS - 浮动到最大宽度 [英] CSS - Float to max width

问题描述

所以我在半弹性容器中制作一排物品。在左边有一个配置文件图片，然后内容浮动在它的右边（两个都向左浮动）。

So I am making a row of items in a semi elastic container. There is a profile image on the left, and then content floated to the right of it (both float left).

我想做的是使内容浮动

CSS：

#container {
   max-width: 800px;
   min-width: 500px;
}
.profile {
   float: left;
   width: 100px;
}
.info {
   float: left:
   min-width: 400px;
   max-width: 700px;
}

HTML：

<div id="container">
    <div class="profile">
        IMG
    </div>
    <div class="info">
        INFO
    </div>
</div>

推荐答案

你希望它扩展来填充父级。只需从 .info 部分中删除 float：left 和width属性，以便它将扩展以填充宽度，然后添加 margin-left：100px ，将其从悬浮在左侧的那个下面推出。

It doesn't make much sense to float something when you want it to expand to fill the parent. Just remove the float: left and the width properties from the .info division so that it will expand to fill the width of the parent and then add a margin-left: 100px to push it out from under the one that is still floated to the left.

这篇关于CSS - 浮动到最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！