0

幅が広く、水平スクロールバーが発生する可能性のある要素があると同時に、要素を正しく配置したいページがあります。例えば：

<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
    Wide child element which determines the width of the page.
</div>
</body>

ワイド要素がブラウザー ウィンドウ内に収まる場合、これは正常に機能します。ただし、ブラウザ ウィンドウが小さすぎて水平スクロールバーが表示される場合、「右に固定」要素はページではなくウィンドウに合わせて配置されます。

間違った右揃え

スクロールバーを移動すると、「右にとどまる」要素が移動し、実際には何にも整列しません。

ページ全体にテーブルを追加すると、私が望んでいないことが起こります:

<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
    Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>

"stay right" 要素は、ブラウザー ウィンドウのサイズに関係なく、幅の広い子要素の右側に揃えられます。

編集:上記の表ベースのソリューションは、幅の広い子要素の幅またはウィンドウ幅の最大値に合わせて右揃えになります。事実上、これにより、ページのコンテンツ (つまり、幅の広い子要素) によって決定される「最小幅」がページに与えられます。これは私が望んでいるものです - 元のテキストからは明確ではありません、申し訳ありません。

ページ全体をテーブルでラップするよりも良い方法があるかどうか疑問に思っています。

4

2 に答える 2

3

それは非常に興味深い問題です。これは、divで計算された幅が、テキストの幅ではなくウィンドウサイズ（および本文のサイズ）と一致するために実際に発生します。フローティングテキストは、レンダリング時に幅/高さをコンテナで確認します（計算された値は実際にはウィンドウのサイズであるため、フロートはウィンドウの端で停止します）。

ほとんどのサイトはgrid960/Foundation / etcのようなものを使用し、最小/最大幅が提供されているため、これは実際には頻繁には発生しません（幅を設定すると問題が解決することがわかったと思います）。

動的なサイズのテキスト（cssのみ）の本当に良い解決策を知りません...テーブルを使用せずに考えることができる唯一のことは、を使用することclearfixです。フローティングの子を持つ要素に実際に使用/作成されます（正しい幅/高さを与えるために..フローティング要素は通常、コンテナの寸法に影響しません）が、この場合も機能します。

<body>
    <div class="clearfix">
        <div style="float:right">Stay right</div>
        <div style="white-space:nowrap; clear:both; font-size:2em">
            Wide child element which determines the width of the page.
        </div>
    </div>
</body>

編集：私は嘘をつきました、私は2番目の（より良い）方法を思いつきました、しかしそれはより現代的なブラウザを必要とします。display: inline-blockORでラッパーを使用することですdisplay: table。これは実際には単なるサブセットclearfixですが、IE8+ベースであることを回避できれば機能します。

<body>
    <div style="display:inline-block">
        <div style="float:right">Stay right</div>
        <div style="white-space:nowrap; clear:both; font-size:2em">
            Wide child element which determines the width of the page.
        </div>
    </div>
</body>
于 2012-08-16T16:40:35.487 に答える
0

ページ全体をテーブルでラップしないでください。2000 年頃から HTML が台無しになります。

fixedの位置が必要だと思いますdiv。ページではなくウィンドウで要素を並べます。

.myDivThatFloatsRight {
   position: fixed;
   top: 10px;
   right: 10px;
}
于 2012-08-16T16:16:45.713 に答える