主页 / 问题 / 643423
Accepted
JaminPeru
Asked:2020-03-24 00:58:14 +0000 UTC2020-03-24 00:58:14 +0000 UTC

为什么行内块移动？

  • 772

为什么块不和谐？这是为什么？以及如何确保它们处于同一水平？

图片

.box {
  width: 70px;
  height: 70px;
  border: 1px solid;
  margin: 5px;
  display: inline-block;
}
<div class="panel">
  <div class="box">
    testtext
  </div>

  <div class="box"></div>

  <div class="box">
    <img src="kevin.jpg" style="max-width: 40px;" />
  </div>

  <div class="box">
    <img src="kevin.jpg" style="max-width: 60px;" />
  </div>

  <div class="box"></div>
</div>

html

1 个回答

  1. Best Answer

    display: inline-block;默认基线对齐是vertical-align: baseline;

    因此，值得设置vertical-align: middle;或vertical-align: top;使块排列在一行中：

    .box{
    width: 70px;
    height: 70px;
    border: 1px solid;
    margin: 5px;
    display: inline-block;
    vertical-align: middle;
}
    <div class="panel">
        <div class="box">
            testtext            
        </div>

        <div class="box"></div>

        <div class="box">
            <img src="kevin.jpg" style="max-width: 40px;"/>
        </div>

        <div class="box">
            <img src="kevin.jpg" style="max-width: 60px;"/>
        </div>

        <div class="box"></div>
</div>

    • 8

相关问题