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

时间:2015-11-13 04:27:50

标签: html css

我是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保持在原位而不是向上/向下移动?

4 个答案:

答案 0 :(得分: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;
}
.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>

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

答案 1 :(得分:0)

您还可以向中心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>

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:-1)

如果你向左浮动中间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>