5

次のようなヘッダーを持つ Web デザイン要件があります。

+-------------------------------------------------------------+
| +---------------------+  +-------++------------------------+|
| | float left DIV A    |  | DIV C || float right DIV B      ||
| +---------------------+  +-------++------------------------+|
+-------------------------------------------------------------+

ヘッダーには、Div A、B、C の 3 つの部分があります。DIV A は左に浮動小数点で、DIV B と C は右に浮動小数点です。DIV A と DIV B には長いテキストが含まれる場合があります。そのため、オーバーフローしたテキストは省略記号として切り捨てられます。DIV C には短いテキストがあり、その内容を切り捨ててはなりません。

以下のようなHTMLを作ってみました。

<html>
    <head>
        <style>
            .header
            {
                width: 100%;
                border: 2px red;
                overflow: hidden;
            }
            .DivA
            {
                float: left;
            }
            .DivC
            {
                float: right;
                white-space:nowrap;
            }
            .DivB
            {
                float: right;
            }
            .clear
            {
                clear: both;
            }
            .DivA, .DivB
            {
                width: 40%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="DivA">
                Hello world 1 Hello world 2 Hello world 3
                Hello world 1 Hello world 2 Hello world 3
                Hello world 1 Hello world 2 Hello world 3
            </div>
            <div class="DivB">
                Good bye Good bye
                Good bye Good bye
                Good bye Good bye
            </div>
            <div class="DivC">
                No Ellipsis
            </div>
            <div class="clear">
            </div>
        </div>
    </body>
</html>

text-overflow:ellipsis は、DIV A と DIV B に幅がある場合にのみ機能します (私の場合は、それらを 45% に設定しています)。

ただし、DIV C には 1 つの問題があります。DIV C の幅はローカライズによって異なる可能性があるため、その幅を明示的に設定することはできません。ブラウザウィンドウを絞り込む場合、div C を次の行に折り返すことができます。これは見栄えが悪いです。

DIV A と DIV B をオーバーフロー省略記号でそれぞれ左と右にフロートさせ、同時に DIV C を最適な幅に適応させる方法はありますか?

4

2 に答える 2

2

ここで行う必要があるのは、div#a と div#b の幅に一致するマージンを div#c に適用することです。

以下に例を示します。

<style>
.DivA {width:250px; float:left;}
.DivB {width:150px; float:right;}
.DivC {margin-left:260px; margin-right:160px;}
</style>

<div class="DivA" />
<div class="DivB" />
<div class="DivC" />

各幅に余分な 10px を追加したことに気付くでしょう。これは、要素間の間隔を広げるためです。もちろん、理想的にはこれらもクリアする必要があります。

これにより、両側に2つの固定列と、空きスペースを占有する中央要素が得られます.

于 2009-04-25T17:23:42.603 に答える