Mor*_*eng 5 html css css-float
我有一个网页设计要求,有一个像这样的标题:
+-------------------------------------------------------------+
| +---------------------+ +-------++------------------------+|
| | 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>
文本溢出:省略号仅在DIV A和DIV B具有宽度时有效(在我的情况下,我将它们设置为45%).
然而,DIV C存在一个问题.由于DIV C的宽度在不同的定位中可能不同,我们无法明确地设置其宽度.缩小浏览器窗口时,可以将div C包装到下一行.这看起来很糟糕.
是否有任何方法可以使DIV A和DIV B分别左右浮动溢出省略号,同时DIV C可以适应其最佳宽度？
这里您需要做的是为 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，这只是为了在元素之间留出更多空间，当然您还需要清除这些（理想情况下）。
然后，这将为您提供两侧的两个固定列和一个将占用任何可用空间的中心元素。