代码之家 › 专栏 › 技术社区 › DCR

为什么图像没有出现在文本的左侧

css html

-1

DCR · 技术社区 · 6 年前

如果我把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>

1 回复 | 直到 6 年前

bhansa 6 年前

我用过 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>