Question

我想在同一水平线上有3列：一个漂浮在左边，一个漂浮在右边，一个漂浮在中间。左边和右边的宽度应该是300px，中间宽度应该是响应的。所有三个部分应该只有几个px，比如说它们之间约为6px的填充，这意味着中间部分应该自动填充剩下的空间。我正在尝试调整我在网上的代码以适应我的项目。

  <div class="main">
       <div class="left" > Left fixed width </div>
       <div class="middle">Middle responsive width </div>
       <div class="right">Right fixed width </div>
  </div>

我的CSS是

    .main{display:inline}
     div {background: #2db34a;
          display: inline-block;   
          text-align: center; }

      .left{width:200px;height:240px}
      .right{width:200px;height:240px}
      .middle{width:60%;height:200px;}

我还希望所有这些（主包装器）水平居中在页面中间，而中间div在主包装器中垂直居中。在破发点540px;我将决定将左侧和右侧div显示为none。

中间内容是否有办法自动填充

有人能帮帮我吗？提前致谢。米歇尔

Answer 1

实现此目的的一种方法是更改HTML元素的顺序，并将两列浮动到两侧。如果中间列在HTML中排在最后，它将填充可用空间。

如果框太窄，我建议使用media query覆盖较小设备上的浮动和宽度，将它们垂直堆叠在特定宽度以下。

＆＃13;

div {
  text-align: center;
}

.left,
.right {
  width: 200px;
  height: 240px;
}

.left {
  float: left;
  background-color: lightblue;
}

.right {
  float: right;
  background-color: lightgreen;
}

.middle {
  height: 200px;
  background-color: pink;
}

@media (max-width: 540px) {
  .left,
  .right {
    float: none;
    width: auto;
  }
}

＆＃13;

<div class="left"> Left fixed width</div>
<div class="right">Right fixed width</div>
<div class="middle">Middle responsive width</div>

＆＃13;

VA79提到的另一种方法是使用flexbox。一个好处是，如果您选择将它们垂直堆叠在较小的设备上（即中间的一个停留在中间位置），您可以保持盒子的视觉顺序。我也错过了元素之间的原始边距要求，这在使用flexbox时非常简单。

＆＃13;

.main {
  display: flex;
  text-align: center;
}

.left,
.right {
  background-color: green;
  width: 200px;
  height: 240px;
}

.middle {
  height: 200px;
  background-color: lightgreen;
  margin: 0 6px;
  flex-grow: 1;
}

@media (max-width: 540px) {
  .main {
    display: block;
  }
  .left,
  .right {
    width: auto;
  }
  .middle {
    margin: 0;
  }
}

＆＃13;

<div class="main">
  <div class="left"> Left fixed width</div>
  <div class="middle">Middle responsive width</div>
  <div class="right">Right fixed width</div>
</div>

＆＃13;

根据shouldiprefix.com，在本文发布时仍建议使用供应商前缀另请注意浏览器compatibility of flexbox。

Answer 2

使用flexbox CSS。 Flexbox Guide

＆＃13;

.main {
	width: 100%;
	display: -webkit-flex;
	display: flex;
}
.main div {
	background: #2db34a;
	border: 1px solid black;
	margin: 3px;
}
.left, .right {
	min-width: 300px;
	max-width: 300px;
}
.middle {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

＆＃13;

<div class="main">
	<div class="left">Left fixed width </div>
	<div class="middle">Middle responsive width </div>
	<div class="right">Right fixed width </div>
</div>

＆＃13;

如何将3个部分放在同一行，2个固定宽度和1个响应宽度

2 个答案: