如何创建一个HTML容器来填充两个浮动元素之间的所有可用宽度？

Question

下面是我想呈现什么样的模式，并且因为它似乎我不能找到一种方法，编写了两个浮动元素之间的容器一样简单...：

----------            ---------- 
|   | Some text text text text text text text text |   | 
|   | text (in a <p> element).      |   | 
| float: | ------------------------------------------ | float: | 
| left; | |  The container I want to create  | | right; | 
|   | ------------------------------------------ |   | 
|   | Some other text text text text text text tex |   | 
---------- text text text text text text text text text |   | 
text text text (in another <p> element).     |   | 
                  ---------- 

每个的宽度的两个浮动元素是未知的，可能会有所不同，所以我必须独立于它们编写容器（以及我不能更改它们的代码）。我想沿着浮动元素的边界有其左右边界。例如，如果我使用div元素（使用display：block），它的左右边框位于两个浮动元素之下...如果我使用table元素（或带display：table的div），它会赢得如果没有任何完整的文本行，将不会填充所有可用的宽度...

我敢打赌，有一个简单的解决方案，但我根本找不到它！谢谢你的帮助！

Answer 1

我明白了！好吧，这是一种黑客攻击，它使用了一个表格，但它适用于每一个浏览器（甚至IE6），并且我现在可以设法将其清理一些，现在我已经可以运行了。

关键是创建一个至少有两个单元格的表格，并将其中一个单元格的宽度设置为100％。这样浏览器将显示尽可能大的单元格，以便使其实际显示的大小尽可能接近整个表格的100％。现在我可以把我想要的东西放在这个单元格中。

这里是相应的HTML代码：

<div style="float:left;">...</div> 
<div style="float:right;">...</div> 
<p>Some text...</p> 
<table> 
    <tr> 
     <td style="width:100%;"> 
      Some content 
     </td> 
     <td style="width:1px;"/> 
    </tr> 
</table> 
<p>Some other text...</p> 

这种方式，容器将正确显示不论无论是在两个浮动DIV尺寸。如果右边的1px宽的空单元格是一个问题，我总是可以在左边放置另一个单元格，以使其对称并减少视觉上的烦人（但事实上，在桌子上使用0边框间距和每个单元格上的0填充，1px宽的空单元实际上不可见...）。

现在我必须找到一种方法，如果可能的话，让所有这些都变得更清洁（甚至可能不使用表格元素？）。

Answer 2

您必须使用边距离开浮动，因为它们不在包含元素的上下文中。它可以用液体或固定宽度的设计工作：

<div id="LeftColumn" style="float: left; width: 20%;"> 
    <p>Left Column</p> 
</div> 
<div id="CenterColumn" style="margin: 0 25%;"> 
    <p>Some text text text text text text text text text (in a <p> element).</p> 
    <div style="width: 100%; text-align:center;"> 
     <p>The container I want to create</p> 
    </div> 
    <p>Some text (in another <p> element).</p> 
</div> 
<div id="RightColumn" style="float: right; width: 20%;"> 
    <p>Right Column</p> 
</div> 

Answer 3

基于由@durilai答案（我相信这更准确地解决了这个问题，但是这取决于你真正想做的事情）：

<div style="float: left; width: 20%;"> 
    <p>Left Column</p> 
</div> 
<p>Some text text text text text text text text text (in a <p> element).</p> 
<div style="margin: 0 25%;"> 
    <p>The container I want to create</p> 
</div> 
<p>Some text (in another <p> element).</p> 
<div style="float: right; width: 20%;"> 
    <p>Right Column</p> 
</div> 

与@durilais解决方案不同的是，当文本比浮动“更高”时，这将与普通浮动类似。它仍然需要你知道浮筒的宽度，并且一旦最内层的浮体低于两个浮筒，它就不会正确运行，但它与你可以得到的解决方案差不多。

Answer 4

这是不可能的。这里的原因：

的width property可以采取的任何值：

1. 固定长度
2. 百分比
3. inherit（=100%）
4. auto（=100%-(margins+borders+paddings)）

这些都不会与你的工作先决条件：

1. 你需要知道的页面宽度和浮动集装箱的宽度
2. 你需要知道的浮动集装箱的宽度为百分比
3. 这不会离开浮动容器单独
4. 你需要知道浮动容器的宽度并设置相应的边距

Answer 5

<div id="Main" style="margin: 0 25%;"> 
    <p>Hello</p> 
</div> 
<style type="text/css"> 
    #Main 
    { 
     width:1000; 
     height:670; 
     background-color:White; 
     color:black; 
    } 
</style>