У меня есть требование к веб-дизайну, чтобы заголовок был таким:
+-------------------------------------------------------------+
| +---------------------+ +-------++------------------------+|
| | 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 может адаптироваться к своей лучшей ширине?