Heavenanvil
@Heavenanvil

Как уменьшить ширину DIV в зависимости от ширины соседнего?

Вопрос кажется весьма простым, но ответа найти пока так и не могу.
В общем 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>

Песочница «здесь»
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
RAX7
@RAX7
Не совсем понял чего вы хотите, но почитайте на досуге про флексбокс
https://codepen.io/anon/pen/PXREqX?editors=0100
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы