你怎么能在CSS中做到这一点

Question

在不使用float属性的情况下在CSS中执行此操作的最佳方法是什么;

我知道如何添加图标，但我不确定如何在标题和段落之前添加图标。

Answer 1

HTML5 / CSS3方法是使用正确的标记而不是1999样式的表，并使用单个flexbox引用对它们进行样式化：

section {
  display:flex;
}

<section>
  <figure><img src="//placehold.it/150"></figure>
  <article>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet etc. etc.</p>
  </article>
</section>

此方法的另一个优点是，您只需在媒体查询中添加flex-direction:column即可对小屏幕进行响应。

Answer 2

使用如下：

.container img, .container div {
   display: inline-block;
}

Answer 3

您可以使用inline-block https://jsfiddle.net/16q2xr8k/

执行此操作

HTML

<img src="http://placehold.it/140x100">
<div>
  <h2>
heading
</h2>
  <p>
    other text other text other text other text other text other text other text other text other text
  </p>
</div>

CSS

img,
div {
  display: inline-block;
}