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