Question

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

这种结构对于理解我的项目是必不可少的，对于拥有较旧浏览器的人来说，我不能退缩。那些人什么也看不见。

这是条件：
-div左和div右应有50px
-div中心应具有响应性，在剩余空间的左右两侧留出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％的父元素，减去120px（.right和.left元素为50，其边距为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>

Answer 2

您对浏览器的确切要求是什么？ Flexbox确实是完成此工作的正确工具，并且使用CSS预处理器或后处理器（例如Autoprefixer），您可以获得每种现代浏览器的支持，包括那些需要针对Flexbox使用特定于供应商语法的浏览器（https://caniuse.com/#feat=flexbox ）。

如果您需要对IE9的支持，则可以使用CSS @supports规则（https://developer.mozilla.org/en-US/docs/Web/CSS/@supports）来定位无法执行Flexbox的浏览器。

响应式div位于中心。每侧Px div

2 个答案: