Вопрос кажется весьма простым, но ответа найти пока так и не могу.
В общем div блоке шириной 700px есть три дочерних блока.
Первый (левый) и третий (правый) с минимальной шириной 150px, то есть их ширина может быть и чуть больше.
Второй же блок (средний) находится между ними и его ширина должна быть остаточной от этих двух. Но проблема в том, что второй блок может содержать много элементов. И если я задам допустим максимальную ширину для второго = 400px, то когда первый или третий блок увеличится, то третий блок «прыгает» вниз, а мне нужно, чтобы с увеличением ширины первого или третьего блока уменьшался размер второго и они все вписывались в один общий блок.
Ниже я приведу код и песочницу, чтобы можно было «потрогать», попробуйте у класса
.article_footer1 или
.article_footer3 увеличить ширину на пару пикселей и поймёте о чём я говорю.
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
.article_footer
{
height: 60px;
width: 700px;
background: #ccc;
}
.article_footer1
{
float: left;
min-width: 150px;
background: #00cc00;
height: 60px;
}
.article_footer2
{
float: left;
max-width: 400px;
background: #cc0000;
height: 60px;
display: table;
}
.article_footer3
{
float: right;
min-width: 150px;
background: #0000cc;
height: 60px;
}
.tags
{
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="article_footer">
<div class="article_footer1">
<p>one</p>
</div>
<div class="article_footer2">
<div class="tags">
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
<a href="#">sixth</a>
<a href="#">seventh</a>
<a href="#">eighth</a>
<a href="#">ninth</a>
<a href="#">tenth</a>
<a href="#">eleventh</a>
<a href="#">twelfth</a>
</div>
</div>
<div class="article_footer3">
<p>three</p>
</div>
</div>
</body>
</html>
Песочница «
здесь»
