5

我有一个网页设计要求，要有这样的标题：

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

标题有 3 个部分：Div A、B、C。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 存在一个问题。由于 DIV C 的宽度在不同的本地化中可能会有所不同，因此我们不能明确设置它的宽度。缩小浏览器窗口时，可以将 div C 换行到下一行。这看起来很糟糕。

有没有办法让DIV A和DIV B分别用溢出省略号向左和向右浮动，同时DIV C可以适应它的最佳宽度？

4

2 回答 2

2

您需要在这里做的是对 div#c 应用与 div#a 和 div#b 的宽度相匹配的边距

以下面为例；

<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，这只是为了让元素之间有更多的间距，当然你也需要理想地清除这些。

然后，这将为您提供两侧的两个固定列和一个占用任何可用空间的中心元素。

于 2009-04-25T17:23:42.603 回答
0

这个很旧（09'），但我会回答那些像我一样来自搜索的人。

由于 A 和 B 各占 40%，因此 C 的最大值为 20%，因为标头为 100%。所以添加max-width:20%;它，C不会进入下一行。但是，当浏览器窗口变窄时，文本将在需要时换行。

如果您不想要这种行为，您可以添加white-space: nowrap;这将使 C 文本与 B 中的文本重叠。

见http://jsfiddle.net/fxLVQ/

于 2013-04-22T12:09:29.157 回答