Question

img {
  width:20%;
}

.shopInfoL2 {
  display:inline-block;
  vertical-align:top;
}

h4 {
  color:red;
  }

<h4>Div 1</h4>
<div>
  <img src="https://s.yimg.com/xd/api/res/1.2/2A8.GbmWTAlpFOqZFY.Leg--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7aD00MDA7cT04NTtyb3RhdGU9YXV0bzt3PTQwMA--/http://nevec-img.zenfs.com/prod/tw_ec05-7/71eb3ae4-2784-4a9c-a3fa-6985fd12a43f.jpg" alt="" class="imgQRL2"> 
  <div class="shopInfoL2">
    <h5>Title here</h5>
    <p>address address  </p>
  </div>
</div>
                         
                         
<h4>Div 2</h4>                         
<div>
  <img src="https://s.yimg.com/xd/api/res/1.2/2A8.GbmWTAlpFOqZFY.Leg--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7aD00MDA7cT04NTtyb3RhdGU9YXV0bzt3PTQwMA--/http://nevec-img.zenfs.com/prod/tw_ec05-7/71eb3ae4-2784-4a9c-a3fa-6985fd12a43f.jpg" alt="" class="imgQRL2"> 
  <div class="shopInfoL2">
    <h5>Title here</h5>
    <p>address address address address address address address address address address address address address address  </p>
  </div>
</div>

这里有两个div，唯一的区别是p标签的内容长度。

从结果中可以看出，Div2中的p长度太长而Div2向下移动到Div1。

如果内容太长，我该怎么做才能让Div2始终位于Div1旁边？p标签会切换到换行符？

Answer 1

为您设置宽度＆lt; div div .shopInfoL2

内容太长时如何制作新行？

1 个答案: