相对于同胞的流体宽度div [英] Fluid width div relative to sibling

问题描述

我有一个怀疑这可能需要Flexbox（或简单地是一个很容易使用），但也许有人有一个想法/解决方法。我有这样的结构：

I have a suspicion this might need Flexbox (or would simply be a lot easier with), but maybe someone has an idea/workaround. I have a structure like this:

<section>
  <div>Some Text Here</div>
  <div></div>
</section>

节宽度：100％。我想要第一个div（浮动左）伸展到不同的宽度，这取决于文本，我想让第二个div采取任何百分比的剩余部分。每个div可能包含各种其他div（在宽度上依次使用百分比）。这可能吗？

Section is width: 100%. I want the first div (floating left) to stretch to different widths depending on text, and I want the second div to take whatever percentage is left of section. Each div will probably contain various other divs floating inside (and they in turn will use percentages for width). Is this possible?

编辑：好吧，我认为更大的问题是，在第二个div，我有一个浮动div与％宽度，但它的父是一个宽度auto ...所以它不会工作正确吗？ Codepen

Ok, I think the bigger problem is the fact that in the second div, I have a floating div with a % width, but it's parent is a width auto...so it won't work right will it? Codepen

推荐答案

您可以通过将一个DIV指定为左浮动，将其他指定为auto（因此使用任何剩余空间）来实现。

You can do this by specifying one DIV as left floating, and other as auto (so it used whatever space is left)

div:first-child { /* div on the left, width as per content */
    float: left;
    width: auto;
    background-color: #777;
}
div:last-child { /* div on the right, uses remaining width */
    background-color: #77f;
    width: auto;
}

检查此演示： http://jsfiddle.net/pQc3d/1/

这篇关于相对于同胞的流体宽度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！