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标记将切换到换行符?

最佳答案

为div设置宽度.shopInfoL2

关于html - 内容太长时如何换行?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31782782/

10-12 12:18