Question

我有一个简单的小提琴：https://jsfiddle.net/jzhang172/9nfb0gj3/

不使用flexbox，我希望能够保持图像大小的静态和旁边的段落。现在，当重新调整大小时，段落移到下一行，我如何在任何时候将它们彼此相邻？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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>

Answer 2

一个好的选择是将img包装在容器中并使用基于百分比的宽度：

https://jsfiddle.net/5fs0s4n3/

.img-container{
  width: 30%;
  float: left;
}
img{
  height:100px;
  width:100px;
}
p{
  float:left;
  display:inline-block;
  width:70%;
}

Answer 3

您可以将显示从inline-block更改为table和table-cell以实现此目的。

.box {
  display: table;
  table-layout: fixed;
}
.box > * {
  display: table-cell;
}
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>

Answer 4

使用边距解决问题：https://jsfiddle.net/oweahea8/1/

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

保持图像和文本彼此相邻

4 个答案: