Question

如何将yellowarea保持在redarea和greenarea的中间位置。

https://jsfiddle.net/ashish3506/4wopk1u3/1/

我的HTML代码

<body>
<span class="redarea"></span> 
<span class="yellowarea"></span> 
<span class="greenarea"></span>
</body>

我的CSS代码

.redarea{
width:300px;
height:300px;
background:red;
float:left;
}

.yellowarea{
width:300px;
height:300px;
background:yellow;
margin-left:400px;
}

.greenarea{
float:right;
width:300px;
height:300px;
background:green;
}

Answer 1

只需这样做

span {  
    width:300px;
    height:300px;
    display:inline-block;
}
.redarea{
    background:red;
}

.yellowarea{
    background:yellow;
}

.greenarea{
    background:green;
}

https://jsfiddle.net/theprog/4wopk1u3/7/

Answer 2

检查代码

.redarea{
width:200px;
height:300px;
background:red;
    display: inline-block;
    vertical-align: middle;
}

.yellowarea{
width:200px;
height:200px;
background:yellow;
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px;
}

.greenarea{
width:200px;
height:300px;
background:green;
    display: inline-block;
    vertical-align: middle;
}

   
<body>
<span class="redarea"></span> 
<span class="yellowarea"></span> 
<span class="greenarea"></span>
</body>

Answer 3

删除浮动和边距并添加display:inline-block

.redarea {
  width:300px;
  height:300px;
  background:red;
  display:inline-block;
}

.yellowarea {
  width:300px;
  height:300px;
  background:yellow;
  display:inline-block;
}

.greenarea {
  width:300px;
  height:300px;
  background:green;
  display:inline-block;
}

注意：这不会为较小的屏幕调整块的大小，因此在JS Fiddle上，它们似乎会堆叠。如果页面的宽度足够900px，那么它们将并排显示。

如何水平对齐一条线中的3个跨距？

3 个答案: