Question

我试图理解css中的垂直对齐属性。当我仅为跨度设置vertical-align = bottom时，它只会向下移动。 div也是如此。但是当我只为p设置vertical-align = bottom时，div和span都会移动。此行为在下面附带的图像中捕获。

我的HTML：

<html>

<head>
  <title>
  </title>
</head>

<body>
  <span>span1</span>
  <div>div1</div>
  <p>paragraph A</p>
</body>

</html>

我的CSS：

span {
  height: 50px;
  width: 75px;
  background: #00FF00;
  display: inline-block;
  vertical-align: ;
}

div {
  height: 100px;
  width: 50px;
  background: #00FFFF;
  display: inline-block;
  vertical-align: ;
}

p {
  height: 200px;
  width: 200px;
  background: #FF00FF;
  display: inline-block;
  vertical-align: bottom;
}

在上图中，只有vertical-align属性在上面的代码中更改，并且仅在指定因子中更改。参见案例2：即使为p设置了div和span，也会改变位置

Answer 1

我已经创建了一个你的修改示例，所以我们可以确切地看到为什么会发生这种情况。我添加了一个SerialPort1.Write("$" & ComboBox4.Text & ComboBox5.Text & "06" & vbCr) System.Threading.Thread.Sleep(50) Dim value As String = SerialPort1.ReadExisting div来查看我们正在对齐项目的行的边缘。

我还保留了未分配wrapper的所有项目，如果您点击其中一项，则会从其兄弟中移除该属性，并将vertical-align添加到您点击的项目中。

我们可以看到原因是您原来的vertical-align: bottom现在是我的p占据容器线的全高，所以没有什么可以对齐的。当您对其应用p.big时，它会影响行中的所有兄弟以接受该值。

否则，它的行为与文档相对应，它相对于行对齐，并且不会影响任何其他元素，但本身。

vertical-align

$(document).ready(function(){
	$('span, .el, p').click(function(e){
  	$('span, .el, p').removeClass("v-bottom");
    $(this).addClass("v-bottom");
  })
})

.wrapper{
  border-top:1px dashed;
  border-bottom:1px dashed;
}
span,
div.el,
p{
  padding: 0;
  margin: 0;
  line-height: 1;
}

span {
  height: 50px;
  width: 75px;
  background: green;
  display: inline-block;
}

div.el {
  height: 100px;
  width: 50px;
  background: yellow;
  display: inline-block;
}

p.big {
  height: 200px;
  width: 200px;
  background: blue;
  display: inline-block;
}
p.small {
  height: 50px;
  width: 100px;
  background: red;
  display: inline-block;
}

.v-bottom{
  vertical-align: bottom;
}

一个内联块的垂直对齐如何影响其相邻的内联块？

1 个答案: