html - 图片和文字怎么排成一行

Question

我需要默认的图片和文字排成一行，但是当屏幕分辨率降低时，文字移动到了图片下面

<div style="background-color:#474747;">
    <p><img src="{{ MEDIA_URL }}{{ article.img.url }}"/></p>
    <a href="" style="margin-left:20px;">
        <h3>{{article.title}}</h3>
        <i class="glyphicon glyphicon-eye-open" style="font-size:20px; color:white;">
            {{ article.view }} {{article.date|date:"d-m-Y"}}
        </i>
    </a>
</div>

Answer 1

我真的不知道它应该是什么样子，但您应该修复损坏的代码，然后使用 CSS 告诉所有 block 级元素改为内联 block 。像这样的东西:

.allinline {
  background-color: #474747;
}

.allinline * {
  display: inline-block;
}

<div class="allinline">
  <p><img src="imgurlhere" /></p>
  <a href="" style="margin-left:20px;">
    <h3>article.title</h3>
    <i class="glyphicon glyphicon-eye-open" style="font-size:20px; color:white; ">article.date</i> </a>
</div>

更好的是，将您的 html 重构为更具语义的内容，然后使用 flexbox 实现您想要的布局。 (同样，我在猜测您希望它看起来像什么)

.linkblock {
  display: flex;
  align-items: center;
  background-color: #474747;
  font-size: 20px;
}

.linkblock img {
  margin-right: 20px;
}

.linkblock em {
  color: white;
}

<a href="#" class="linkblock">
  <img src="https://via.placeholder.com/100" />
  <strong>article.title</strong> <em class="glyphicon glyphicon-eye-open">article.date</em>
</a>