使内联块 div 占据剩余宽度的 100% [英] Make an inline-block div take 100% of the remaining width
问题描述
我在另一个 div
中有 3 个 div
块.
我想做的是将它们内联,但前 2 个 div
块应根据其内容占用宽度,最后一个 div
占用剩余空间.
<div class="red">红色</div><div class="green">Green</div><div class="blue">Blue</div>
我尽量避免使用固定宽度,因为我需要在响应式设计中使用它.
我怎样才能让 this fiddle 中的蓝色 div
使用其余的可用其父级的空间并在调整屏幕大小时做出响应?
我相信,如果您根本不想指定任何像素或百分比宽度并且使红色和绿色容器仅与其内容一样宽,您将需要将它们包装在自己的容器中,下面命名为 .left
:
<div class="left"><div class="red">红色</div><div class="green">green</div><div class="blue">blue</div>
如果你现在将 .left
浮动到左边,并且将 .left div
浮动到左边,你现在不再需要指定任何内联块元素.蓝色容器将占用尽可能多的空间,直到 .container
结束.
.left {向左飘浮;}.left div {向左飘浮;}
编辑
傻我,显然不需要 .left
容器,只要你将 float: left
添加到你的红色和绿色块中,就像上面@Ennui 所说的在评论中 :)
I have 3 div
blocks inside another div
.
What I wanted to do is to put them inline, but the first 2 div
blocks should take a width according to their content and the last div
take the remaining space.
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
I try to avoid the use of fixed widths because I need to use this in a responsive design.
How can I make the blue div
in this fiddle take the rest available space of its parent and act responsive if the screen is resized?
I believe if you don't want to specify any pixel or percentage widths at all and make the red and green containers only as wide as their content, you will need to wrap them inside their own container, named .left
below:
<div class="container">
<div class="left">
<div class="red">Red</div>
<div class="green">green</div>
</div>
<div class="blue">blue</div>
</div>
If you now float .left
to the left, and also float .left div
to the left, you now no longer need to specify any inline-block elements. The blue container will simply take up as much space as it has available until the end of the .container
.
.left {
float: left;
}
.left div {
float: left;
}
Edit
Silly me, the .left
container is obviously not needed as long as you just add float: left
to your red and green blocks, just like @Ennui said above in the comments :)
这篇关于使内联块 div 占据剩余宽度的 100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!