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>

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

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

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
AD-VI Нижний Новгород
от 30 000 до 50 000 руб.
23 янв. 2019, в 09:57
500 руб./в час
23 янв. 2019, в 09:01
2500 руб./за проект
23 янв. 2019, в 08:56
1500 руб./в час