Отзывчивый div в центре.Px div в каждую сторону - PullRequest
Новая
       15

Отзывчивый div в центре.Px div в каждую сторону

0 голосов
/ 12 июня 2019

У меня есть разные строки. У каждого есть div слева и один справа. У них должно быть 50px. В центре мне нужен div, который должен быть отзывчивым, он должен адаптироваться к ширине окна. Я решил с Flex, но я беспокоюсь о старых браузерах. Есть ли другой способ сделать этот эффект?

Эта структура необходима для понимания моего проекта, и я не могу отступить перед людьми с более старыми браузерами. Эти люди ничего не увидят.

Это условия:
- div влево и div вправо должны иметь 50px
- центр div должен быть отзывчивым, заполните оставшееся пространство с полями в 10 пикселей слева и справа

Это то, что я пробовал и более или менее работает, но только в новых браузерах: 

#wrap {
	position: relative;
	margin: 20px auto;
	width: 80%;
	background-color: red;
}
	
.row {
	position: relative;
	height: 30px;
	margin-bottom: 10px;
	
	display: flex;
  	flex-direction: row;
	flex-wrap: nowrap;
	background-color: lightgray;
}
	
.left {
	width: 50px; height: 30px; line-height: 30px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
	background-color: grey;
}
	
.center {
	min-height: 30px; line-height: 30px;
	text-align: center;
	background-color: blue;
	flex-grow: 1;
}
	
.right {
	width: 50px; height: 30px; line-height: 30px;
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	background-color: grey;
}
<div id="wrap">
	<div class="row">
		<div class="left">left</div>
		<div class="center">center</div>
		<div class="right">right</div>
	</div>
	<div class="row">
		<div class="left">left</div>
		<div class="center">center</div>
		<div class="right">right</div>	
	</div>
</div>

Ответы [ 2 ]

2 голосов
/ 12 июня 2019

Вы можете использовать width: calc(100% - 120px);

Это означает, что класс .center будет брать 100% с родительским элементом, меньше 120px (50 для .right и .leftэлементы и 10 для его полей).

По какой-то причине в этом фрагменте мне пришлось установить width: calc(100% - 128px);

#wrap {
	margin: 20px auto;
	width: 80%;
	background-color: red;
}

.row {
	height: 30px; margin-bottom: 10px; background-color: green;
}

.left,
.right {
	width: 50px; height: 30px; line-height: 30px;
	display: inline-block;
	text-align: center;
	background-color: grey;
}

.left { margin-right: 10px; }
.right { margin-left: 10px; }

.center {
	min-height: 30px; line-height: 30px;
	text-align: center;
	background-color: blue;
  display: inline-block;
  width: calc(100% - 128px);
}
<div id="wrap">
	<div class="row">
		<div class="left">left</div>
		<div class="center">center</div>
		<div class="right">right</div>
	</div>
	<div class="row">
		<div class="left">left</div>
		<div class="center">center</div>
		<div class="right">right</div>	
	</div>
</div>
0 голосов
/ 12 июня 2019

Каковы ваши требования к поддержке браузера? Flexbox действительно является подходящим инструментом для этой работы, и с помощью пре- или постпроцессора CSS (скажем, Autoprefixer) вы можете получить поддержку для всех современных браузеров, включая те, которые нуждаются в синтаксисе конкретного поставщика для Flexbox (* 1002). *

Если вам требуется поддержка, скажем, IE9, то вы можете использовать CSS @supports at-rules (

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) для целевых браузеров, которые не могут использовать Flexbox.

...