0

これは私がレンダリングしたいもののスキーマです.2つのフローティング要素の間のコンテナをコーディングする方法が見つからないように見えます.

 ----------                                                ---------- 
|          | 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).                  |          |
                                                           ----------

2 つの浮動要素のそれぞれの幅は不明であり、異なる可能性があるため、それらとは別にコンテナーをコーディングする必要があります (コードを変更することもできません)。そして、浮動要素の境界に沿って左右の境界を設定したいと考えています。

たとえば、div 要素 (display:block を使用) を使用すると、左右の境界線が 2 つのフローティング要素の下に表示されます... 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 
<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 に答える
0

不可能です。理由は次のとおりです。

width プロパティは、次の値のいずれかを取ることができます。

  1. 固定長
  2. パーセンテージ
  3. inherit( =100%)
  4. auto( =100%-(margins+borders+paddings))

これらのいずれも、前提条件では機能しません。

  1. ページ幅とフローティング コンテナーの幅を知る必要があります。
  2. フローティングコンテナの幅をパーセンテージで知る必要があります
  3. これにより、フローティングコンテナがそのままになることはありません
  4. フローティングコンテナの幅を知り、それに応じて余白を設定する必要があります
于 2010-08-03T07:33:46.560 に答える
0

わかった！これは一種のハックで、テーブルを使用していますが、すべてのブラウザー (IE6 を含む) で動作します。

The key is to create a table with at least two cells, and to set the width of one of them to 100%; this way the browser will display this cell as large as possible in order to get its actual displayed size as close to 100% of the whole table as possible. And now I can put what I want in this cell.

Here is the corresponding HTML code:

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

This way, the container will display correctly regardless of the size of whatever is in the two floating div. And if the 1px-wide empty cell on the right is a problem, I can always put another one on the left to get it symmetrical and less visually annoying (but as a matter of fact, with a 0-border-spacing on the table and a 0-padding on each cell, the 1px-wide empty cell is actually not visible...).

Now I've got to find a way, if possible, to get all this a bit cleaner (and maybe even without using a table element?).

于 2010-08-03T22:00:16.577 に答える
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>のフロートが 2 つのフロートの下にあると正しく動作しませんが、得ることができるソリューションにほぼ近いです。

于 2010-08-02T23:27:09.343 に答える