javascript - 保持图像和文本彼此相邻

Question

我有一个简单的 fiddle :https://jsfiddle.net/jzhang172/9nfb0gj3/

在不使用 flexbox 的情况下，我希望能够保持图像大小和旁边的段落不变。现在，调整大小时段落会移动到下一行，如何让它们始终保持相邻？

img{
  height:100px;
  width:100px;
  display:inline-block;
  float:left;
}
p{
  float:left;
  display:inline-block;
  width:300px;
}

<div class="box">
  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>

Answer 1

你这样做，你在 box 上设置 white-space: nowrap 并在你的 上删除 float: left img 和 p。我还在 img 上添加了 vertical-align: top 以使其顶部对齐。

white-space: nowrap 起到了作用，告诉内联元素不要换行。

.box {
  white-space: nowrap;
}
img{
  height:100px;
  width:100px;
  display:inline-block;
  vertical-align: top;
}
p{
  white-space: normal;
  display:inline-block;
  width:300px;
}

<div class="box">
  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>

2016 年的变体是 flex

.box {
  display: flex;
}
img{
  height:100px;
  width:100px;
}
p{
  width:300px;
}

<div class="box">
  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p>
</div>