Очистить плавающую картинку после заголовка при использовании 2 столбцов - PullRequest
0 голосов
/ 06 марта 2020

Я пытаюсь, чтобы моя картинка всплывала справа от текста, но когда внутри текстовой области есть заголовок, я хочу, чтобы заголовок начинался под картинкой. Я все еще хочу, чтобы после рисунка было две колонки.

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>

Это выглядит так:

enter image description here

Поместить текст в два столбца в статье у меня есть это CSS:

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

1 Ответ

1 голос
/ 06 марта 2020

Сначала исправьте разметку, чтобы у вас не было h3 в p, затем вы можете вложить нужный контент в столбцы в div и поместить в него столбцы вместо p с

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...