Question

有没有人知道为什么我的文字不断推动我的1块元素？当我删除文本时，块元素彼此完美地内联。

<div class="item-0" align="center">
    <div class="row">
        <div class="col-lg-12">

            <div class="body-0">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div><!-- body-0 -->

            <div class="image-0">
                <img src="images/ios_android_devices2.png" class="img-responsive" alt="ios_android" id="ios_android">
            </div><!-- image-0 -->

        </div><!-- col12 -->
    </div><!-- row -->
</div><!-- item-0 -->

CSS如下

.item-0 {
background-color: green;

}

.body-0{
display: inline-block;
background-color: red;
max-width: 100;
width: 400px;
height: 250px;

}

.image-0 {
display: inline-block;
height: 250px;
max-width: 100;
width: 300px;
background-color: #ccc;

}

Answer 1

使用vertical-align:top;：

   .image-0 {
      display: inline-block;
      height: 250px;
      max-width: 100;
      width: 300px;
      background-color: #ccc;
      vertical-align:top;
    }
    .body-0{
      display: inline-block;
      background-color: red;
      max-width: 100;
      width: 400px;
      height: 250px;
      vertical-align:top;
    }

Codepen

Answer 2

使用vertical-align:top将内联块相互对齐（注意：使用演示中的“整页”选项查看效果）：

.item-0 {
background-color: green;
}

.body-0{
display: inline-block;
  vertical-align:top;
background-color: red;
max-width: 100;
width: 400px;
height: 250px;
}

.image-0 {
display: inline-block;
  vertical-align:top;
height: 250px;
max-width: 100;
width: 300px;
background-color: #ccc;
}

<div class="item-0" align="center">
    <div class="row">
        <div class="col-lg-12">

            <div class="body-0">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div><!-- body-0 -->

            <div class="image-0">
                <img src="images/ios_android_devices2.png" class="img-responsive" alt="ios_android" id="ios_android">
            </div><!-- image-0 -->

        </div><!-- col12 -->
    </div><!-- row -->
</div><!-- item-0 -->

内联块元素处于关闭位置

2 个答案: