Question

我有3个div。一个div居中，两个div位于左右两侧。居中的div的最大宽度为400像素。这是CSS

#left{float: left;background-color: red;height:100%;}
#right{float: right;background-color: green;height:100%}
#center{max-width:400px;margin: auto;background-color: blue;height:100%}
#container{width:100%;height:50px;}
body{color:white;}

这是HTML

<div  id='container'>
    <div  id='left'>
    left
    </div>
    <div  id='right'>
    right
    </div>
    <div  id='center'>
    center
    </div>
</div>

我还准备了jsfiddle。我需要左右div来“拉伸”到中心div。

Answer 1

如果你没有反对使用flex，那将会很容易。

下面没有重新排序您的HTML结构，而是使用CSS中的order在#center :)设置center。

#container {
  display: flex;
}
#container > div {
  flex: 1;
  order: 1;
background:yellow;
}
#container > div#center {
  max-width: 400px;
  order: 2;
  
  /* let'see it */
  background: linear-gradient(to left, gray 50%, lightgray 50%) left no-repeat;
  border: solid;
  background-size: 398px auto;/* show the last 2 pixel blank when max-width reached */
}
#container > div#right {
  order: 3
}

<div id='container'>
  <div id='left'>
    left
  </div>
  <div id='right'>
    right
  </div>
  <div id='center'>
    center
  </div>
</div>

Answer 2

您可以使用calc()功能。

具体做法是：

width: calc(50% - 200px);

由于中心元素的宽度为400px且两边相等，因此您可以通过将总宽度的50％减去200px（代表中心元素的一半）来简单地计算两边的宽度。这将获得视口边缘和中心元素边缘之间的宽度。

对于calc（），

Can I Use support table。

尝试下面的内容：

#left {
  float: left;
  background-color: red;
  height: 100%;
  width: calc(50% - 200px);
}
#right {
  float: right;
  background-color: green;
  height: 100%;
  width: calc(50% - 200px);
}
#center {
  max-width: 400px;
  margin: auto;
  background-color: blue;
  height: 100%
}
#container {
  width: 100%;
  height: 50px;
}
body {
  color: white;
}

<div id='container'>
  <div id='left'>
    left
  </div>
  <div id='right'>
    right
  </div>
  <div id='center'>
    center
  </div>
</div>

Answer 3

您可以使用calc()功能执行此操作：

#left{float: left;background-color: red;height:100%; width: calc(50% - 200px);}
#right{float: right;background-color: green;height:100%; width: calc(50% - 200px);}

Fiddle here

200px表示中心宽度容器的一半，50%，因为每侧有两个容器（左侧和右侧）

3个div：一个居中的div，最大宽度和左，右div，应占用剩余空间

3 个答案: