使用2栏时清除标题后的浮动图片

Question

我想让我的图片浮动到文本的右侧，但是当文本区域内有 header 时，我希望标题从图片下方开始。我仍然希望图片后面有两列。

p img {
  float: right;
}

article h3 {
  clear: right;
}

<article>
  <h2>My current occupation</h2>
  <p>
    <img src="./Images/icons8-workstation-48.png" alt="computers"> Currently I am a student at Stockholm university. I am very happy to be more than half way through my bachelor program in computer science. This is my only occupation at the moment and
    my focus is on learning and preparing for working life.
  </p>
  <h3>test</h3>
  <p>

    I Have been learning how to code in Python, Java and also functional languages including Haskell. I am also learning math and my most recent course passed was multivariable calculus. This course was quite hard but looking back I think it gave me very
    good experience practicing to solve harder problems in a short amount of time and also to present math problems in front of an audience. The program also includes theory behind computer computation as well as software development design and methods.
    You can read more about my experiences and journey enrolling at university at page history.

  </p>

</article>

看起来像这样：

要在一篇文章中将文本分两栏，我有这个 CSS:

article p {
    column-count: 2;
    margin: 1em;
}

Answer 1

首先修正你的标记，这样你就没有 p 中的 h3，然后你可以将你想要的内容嵌套在 div 中的列中，然后将列到那个而不是 ps

img {
  float: right;
}

h3 {
  clear: right;
}

.columns {
  column-count: 2;
  margin: 1em;
}

<article>
  <h2>My current occupation</h2>
  <div class="columns">
    <p>
      <img src="https://www.fillmurray.com/50/50" alt="computers"> 
      Currently I am a student at Stockholm university. I am very happy to be more than half way through my bachelor program in computer science.
    </p>
    <h3>test</h3>
    <p>
      This is my only occupation at the moment and my focus is on learning and preparing for working life. I Have been learning how to code in Python, Java and also functional languages including Haskell. I am also learning math and my most recent course passed
      was multivariable calculus. This course was quite hard but looking back I think it gave me very good experience practicing to solve harder problems in a short amount of time and also to present math problems in front of an audience. The program
      also includes theory behind computer computation as well as software development design and methods. You can read more about my experiences and journey enrolling at university at page history.
    </p>
  </div>
</article>

使用2栏时清除标题后的浮动图片

Clear floating picture after heading when using 2 columns

css

css-float

css-multicolumn-layout