Question

我是CSS的新手，目前我有一个正确的div和一个左div。我试图把它们放在它们之间，当我这样做时，它会将右侧的div略微向下移动。这就是我现在在CSS中的内容：

.left {
  height:300px;
  width:200px;
  border:3px solid black;
  float:left;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;
}

.center{
  height:100px;
  width:100px;
  background-color:blue;
  margin-left:auto;
  margin-right:auto;
}


.right{
  height:300px;
  width:200px;
  border:3px solid black;
  float:right;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;
  
}

  <div class="left">
     </div>

 <div class="center">
    </div>
    
    <div class="right">
    </div>

所以我要问的是，我怎样才能将中间div保持在中间位置，并将左右div保持在原位而不是向上/向下移动？

Answer 1

您可以更改div的顺序：

.left {
  height: 300px;
  width: 200px;
  border: 3px solid black;
  float: left;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: aliceblue;
  margin-bottom: 10px;
}
.center {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
}
.right {
  height: 300px;
  width: 200px;
  border: 3px solid black;
  float: right;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: aliceblue;
  margin-bottom: 10px;
}

<div class="left">
</div>
<div class="right">
</div>
<div class="center">
</div>

来自W3C's Visual Formatting Model：

内容[浮动元素后面的内容]沿左浮动框的右侧向下流动，沿右浮动框的左侧向下流动。

由于您希望中心div位于左浮动div的右侧并且右浮动div的左侧，因此应将其放在HTML中的两个 div之后。

或者按照他们的方式保持div，并调整右边div的上边距：

.left {
  height: 300px;
  width: 200px;
  border: 3px solid black;
  float: left;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: aliceblue;
  margin-bottom: 10px;
}
.center {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
}
.right {
  height: 300px;
  width: 200px;
  border: 3px solid black;
  float: right;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: aliceblue;
  margin-bottom: 10px;
  margin-top: -100px;
}

<div class="left">
</div>

<div class="center">
</div>

<div class="right">
</div>

负的上边距抵消了浮动推动盒子的影响。

Answer 2

您还可以向中心div添加负边距。

.left {
  height:300px;
  width:200px;
  border:3px solid black;
  float:left;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;
}

.center{
  height:100px;
  width:100px;
  background-color:blue;
  margin-left:auto;
  margin-right:auto;
margin-bottom: -100px;
}


.right{
  height:300px;
  width:200px;
  border:3px solid black;
  float:right;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;
  
}

<div class="left">
 </div>

 <div class="center">
</div>

<div class="right">
</div>

Answer 3

这里没有足够的关于你想要的结果的数据，但是为什么不把所有三个div都浮动到左边？

更新：您可以使用flexbox，具体取决于您的浏览器支持。将div放入容器中并将容器显示设置为flex。

.container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }

Answer 4

如果你向左浮动中间div并给同一个中间div留一个边距，当屏幕尺寸改变时，它并不总是在中间。因此，您必须将中间div位置设置为绝对值，并使其始终位于所有屏幕尺寸的中间位置。你可以通过设置绝对位置并给出左边来使任何东西成为中心：0;右：0;保证金：汽车; css属性。所以让中心div位置绝对并加左：0px;右：0像素; css styles.So为.center类添加新样式。

.left {
  height:300px;
  width:200px;
  border:3px solid black;
  float:left;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;
}

.center{
  height:100px;
  width:100px;
  background-color:blue;
  margin-left:auto;
  margin-right:auto;
  position:absolute;
  left:0;
  right:0;
}


.right{
  height:300px;
  width:200px;
  border:3px solid black;
  float:right;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background-color:aliceblue;
  margin-bottom:10px;

}

  <div class="left">
     </div>

 <div class="center">
    </div>

    <div class="right">
    </div>

如何将div放在另外两个div之间？

4 个答案: