html – 使一个inline-block div占据剩余宽度的100％

发布时间：2020-12-14 18:56:45 所属栏目：资源来源：网络整理

导读：我在另一个div里面有3个div块. 我想做的是将它们放在一起,但是前2个div块应该根据其内容宽度,最后一个div占用剩余的空间. div class="container" div class="red"Red/div div class="green"Green/div div class="blue"Blue/div/div 我试图避免使用固定宽度,

我在另一个div里面有3个div块.

我想做的是将它们放在一起,但是前2个div块应该根据其内容宽度,最后一个div占用剩余的空间.

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

我试图避免使用固定宽度,因为我需要在响应式设计中使用它.

如何使this fiddle的蓝色div可以占用其父级的剩余空间,并且如果屏幕调整大小,则会采取响应措施？

解决方法

我相信如果您不想指定任何像素或百分比宽度,并使红色和绿色容器只能与其内容一样宽,您将需要将它们包装在自己的容器中,名为.left,如下所示：

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

如果现在在左边浮动.left,并将左侧的.left div浮动,则现在不再需要指定任何内嵌块元素.蓝色的容器将占用尽可能多的空间,直到.container的结尾.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

编辑

愚蠢的我,.left容器显然是不需要,只要你只需要添加float：留下你的红色和绿色的块,就像@Ennui上面说的:)

Updated fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!