如何设置浮动div的宽度来占用剩余空间而不推其他div？ [英] How do you set a floating div's width to take up remaining space without pushing other divs down?

问题描述

对于我想要的布局的一部分，我想使用三个div，所有的浮动在一起。左和右有一个max-width设置，它工作正常，但我想要中间的div扩展其宽度填充剩余的空间。为了澄清，左右div可以有从0px到最大宽度的任何地方的宽度，这取决于每个中的内容，我想让中间的div扩展其宽度，以便占据空间的其余部分不

For part of a layout I want to make, I want to use three divs, all floating next to each other. The Left and Right have a max-width set, which works fine, but I want the middle div to expand its width to fill the remaining space. To clarify, the left and right divs may have a width of anywhere from 0px to the max-width, depending on what is in each, and I want the middle div to expand its width so that it takes up the rest of the space not used by the divs on either side.

现在的问题是，如果中间div有很多内容，它会扩展并推动右边div

The problem it's having now is that if there is a lot of content in the middle div, it's expanding and pushing the right div off to the next line instead of keeping it up with the other two.

下面是我到目前为止的css：

Here's the css I have so far:

#left-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: left;
}

#middle-column {
 float: left;
 width: auto;
}

#right-column {
 width: auto;
 max-width: 200px;
 height: auto;
 float: right;
}

...和HTML：

< div id =left-column> ...< / div>

< div id =middle-column> ...< / div ;

< div id =right-column> ...< / div>

...and the HTML:
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>

我认为这可以使用三列，单行表完成，但我绝对做不要使用表 - 我想尽可能通过使用纯CSS完成。

I think that this can be accomplished using a three-column, single-row table, but I absolutely do NOT want to use tables - I want to accomplish as much as possible by using pure css.

谢谢！

推荐答案

经典浮动广告

如果您订购：

Classic Floats

If you order it:

<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>

，左边的列向左移动，右边的列向右边移动，剩余空间。

and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.

如果你不需要支持旧的浏览器，你可以使用flexbox。使用flexbox，这种结构变得更加简单，并且标记不需要改变。

If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.

您将需要能够选择父元素，因此为了演示的目的，代码将被< div class =wrapper> 包装。

You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by <div class="wrapper">.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
}

.left {
  background-color: red;
  width: 100px;
}
.middle {
  background-color: green;
  flex: 1;
}
.right {
  background-color: blue;
  width: 100px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

显式添加高度和宽度，以使< div> 可见。根据实际内容，栏会自动调整。

The height and widths are added explicitly so that the <div>s are visible. With actual content, the columns would automatically adjust.

这篇关于如何设置浮动div的宽度来占用剩余空间而不推其他div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！