Question

如果我注释掉img标签，则文本将按原样显示。如何使文本显示在img标签的右侧？

div,p{
display:inline-block;
vertical-align:top;
}

<div>
<img src="https://picsum.photos/200/300?image=0"  />
<p> Some text</p>
</div><br>
<div >
<ul>
  <li>This photo is amazing</li>
  <li>Great view!</li>
  <li>But why are the bullet points in the photo??</li>
  <li>Good question, indeed!</li>
</ul>
</div>

Answer 1

我已经使用float: left;来使图像向左对齐，并且使ul内联显示，请检查以下示例：

img {
  float: left;
  margin: 5px 10px 5px 0;
}

ul{
  display: inline-block;
  padding-left: 20px;
}
.clear {
  clear: left;
}

<div>
  <img src="https://picsum.photos/200/300?image=0" />
  <p> Some text</p>

  <ul class="clear">
    <li>This photo is amazing</li>
    <li>Great view!</li>
    <li>But why are the bullet points in the photo??</li>
    <li>Good question, indeed!</li>
  </ul>
</div>

为什么图片未显示在文字左侧

1 个答案: