Question

如何使.col2具有灵活性，以便填补.col1和.col3之间的空间。我尝试了百分比，但它不起作用。实现这一目标的最佳方法是什么？感谢。

body{
	margin:0;
}
.header{
	width:100%;
	background:gray;
	height:120px;
	margin:0 auto;
}
.MainController{
	width:100%;
	clear:both;
}
 .col1{
	height:679px;
	background:yellow;
	width:150px;
	float:left;
}
.col2{
	height:679px;
	background:black;
	float:left;
	width:20%;
}
.col3{
	height:679px;
	background:red;
	width:300px;
	float:right;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="header"></div>
	<div class="MainController">
		<div class="col1"></div>
		<div class="col2"></div>
		<div class="col3"></div>
	</div>
</body>
</html>

Answer 1

您可以使用Flexbox布局。将display: flex应用于父级并将flex: 1添加到.col2以使其动态扩展。

＆＃13;

body {
  margin: 0;
}
.header {
  width: 100%;
  background: gray;
  height: 120px;
  margin: 0 auto;
}
.MainController {
  width: 100%;
  clear: both;
  display: flex;
}
.col1 {
  height: 679px;
  background: yellow;
  width: 150px;
}
.col2 {
  flex: 1;
  background: black;
  width: 20%;
}
.col3 {
  background: red;
  width: 300px;
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header"></div>
  <div class="MainController">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
  </div>
</body>

</html>

＆＃13;

Answer 2

方法1：使用`calc`：

您可以使用calc计算宽度。 .col2将是宽度的100％减去两列的宽度。所以在这种情况下：

calc: (100% - 450px); /*150px + 300px = 450px*/

您的代码变为：

body{
	margin:0;
}
.header{
	width:100%;
	background:gray;
	height:120px;
	margin:0 auto;
}
.MainController{
	width:100%;
	clear:both;
}
 .col1{
	height:679px;
	background:yellow;
	width:150px;
	float:left;
}
.col2{
	height:679px;
	background:black;
	float:left;
	width:calc(100% - 450px);
}
.col3{
	height:679px;
	background:red;
	width:300px;
	float:right;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="header"></div>
	<div class="MainController">
		<div class="col1"></div>
		<div class="col2"></div>
		<div class="col3"></div>
	</div>
</body>
</html>

方法2：使用`flexbox`：

您也可以像Aziz建议的那样使用flexbox。

只需将.col2设为flex:1，将.MainController设为display:flex即可。像这样：

body{
	margin:0;
}
.header{
	width:100%;
	background:gray;
	height:120px;
	margin:0 auto;
}
.MainController{
	width:100%;
	clear:both;
    display: flex;
}
 .col1{
	height:679px;
	background:yellow;
	width:150px;
	float:left;
}
.col2{
	height:679px;
	background:black;
	float:left;
    flex: 1;
}
.col3{
	height:679px;
	background:red;
	width:300px;
	float:right;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="header"></div>
	<div class="MainController">
		<div class="col1"></div>
		<div class="col2"></div>
		<div class="col3"></div>
	</div>
</body>
</html>

浏览器支持

这两种方法都受到广泛支持，但您可能仍希望在此处检查浏览器支持。

calc() support

flexbox support

css灵活的中间列布局

2 个答案:

方法1：使用`calc`：

方法2：使用`flexbox`：

浏览器支持

css灵活的中间列布局

2 个答案:

方法1：使用calc：

方法2：使用flexbox：

浏览器支持

方法1：使用`calc`：

方法2：使用`flexbox`：