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），它的左右边框位于两个浮动元素下......如果我使用表格元素（或带有display：table的div），它就赢了“如果其中没有任何全文行，请填写所有可用宽度...

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

Answer 1

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

<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 2

根据@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解决方案不同，当文本比浮点数“更高”时，它会像普通浮点数一样运行。它仍然需要你知道浮动的宽度，并且一旦最里面的<div>低于两个浮点数它就不会正常运行，但它与你可以得到的解决方案差不多。

Answer 3

这是不可能的。原因如下：

width property可以采用以下任何值：

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

这些都不符合您的先决条件：

您需要知道页面宽度和浮动容器的宽度
您需要知道浮动容器的宽度为百分比
这不会单独留下浮动容器
您需要知道浮动容器的宽度并相应地设置边距

Answer 4

我明白了！好吧，这是一种黑客，它使用一个表，但它适用于每一个浏览器（甚至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 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>

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

5 个答案: