使inline-block div占据剩余宽度的100％ [英] Make an inline-block div take 100% of the remaining width

问题描述

我有另一个 div 内有3个 div 区块。

我想要做的是将它们内联，但前两个 div 块应该根据其内容和最后的 div 占用剩余的空间。

 < div class =container 
< div class =red>红色< / div> 
< div class =green>绿色< / div> 
< div class =blue>蓝色< / div> 
< / div> 
  

我尝试避免使用固定宽度，因为我需要在响应式设计中使用。 / p>



如何在 div

解决方案

div>

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

 < div class =container 
< div class =left> 
< div class =red>红色< / div> 
< div class =green>绿色< / div> 
< / div> 
< div class =blue> blue< / div> 
< / div> 
  

如果现在将 .left left，还要向左浮动 .left div ，现在不再需要指定任何inline-block元素。蓝色容器将占用尽可能多的空间，直到 .container 结束。

  .left {
 float：left; 
} 
 
 .left div {
 float：left; 
} 
  

小提琴

编辑 b

显然不需要 .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;
}

Fiddle

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 :)

Updated fiddle

这篇关于使inline-block div占据剩余宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！