中心的响应式 div。每边的 Px div

Question

我有不同的行。每个都有一个 div 在左边和一个在右边。他们必须有 50 像素。在中心，我需要一个必须响应的 div，它应该适应窗口的宽度。我用 flex 解决了，但我担心旧的浏览器。有没有其他方法可以达到这种效果？

这种结构对于理解我的项目至关重要，对于使用旧浏览器的人来说，我不能退缩。那些人什么也看不见。

这是条件：
- div left 和 div right 应该有 50px
- div center应该是响应式的，用左右10px的边距填充剩余空间

这是我尝试过的，或多或少有效，但仅适用于新浏览器：

#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>

Answer 1

您可以使用width: calc(100% - 120px);

这意味着.center 类将占用父元素的 100% with，减去 120px（.right 和 .left 元素为 50，其边距为 10）。

由于某种原因，在这个 sn-p 中我不得不设置 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>

Answer 2

您对浏览器的具体支持要求是什么？ Flexbox 确实是完成这项工作的合适工具，并且通过 CSS 预处理器或后处理器（例如 Autoprefixer），您可以获得对每个现代浏览器的支持，包括那些需要 Flexbox 供应商特定语法的浏览器 (https://caniuse.com/#feat=flexbox)。

如果您需要支持，比如 IE9，那么您可以使用 CSS @supports at-rules (https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) 来定位无法使用 Flexbox 的浏览器。