0

这是我想要渲染的架构，看起来很简单，我找不到在两个浮动元素之间对容器进行编码的方法......：

 ----------                                                ---------- 
|          | 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）它不会填充所有如果其中没有任何全文行，则可用宽度...

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

4

5 回答 5

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>
于 2010-08-02T23:05:44.860 回答
0

根据@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>，但它与您可以获得的解决方案差不多。

于 2010-08-02T23:27:09.343 回答
0

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

width 属性可以采用以下任何值：

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

这些都不适用于您的先决条件：

  1. 你需要知道页面宽度和浮动容器的宽度
  2. 你需要知道浮动容器的宽度百分比
  3. 这不会让浮动容器独自一人
  4. 您需要知道浮动容器的宽度并相应地设置边距
于 2010-08-03T07:33:46.560 回答
0

我得到了它！好的，这是一种 hack，它使用了一个表格，但它适用于每个浏览器（甚至 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-border-spacing和每个单元格上的 0 填充，1px 宽的空单元格实际上是不可见的......）。

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

于 2010-08-03T22:00:16.577 回答
0 
<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>
于 2014-05-04T00:03:34.887 回答