Условное поле CSS с (только CSS, без JS)

Question

Описание проблемы

У меня есть эта (довольно распространенная) проблема.Если я плаваю в изображении, я могу дать ему поля, чтобы оно обвивало изображение некоторым пространством.Итак, если я сделаю это:

.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

<img class="alignleft" src="https://via.placeholder.com/350x150" alt="" />
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

И, конечно, работает нормально .... до тех пор, пока изображение находится наверху элемента.Но если я добавлю его в середине текста, это произойдет:

.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

на всякий случай, вот проблема:

Поскольку он имеетmargin:0, на изображении нет места сверху.Очевидно, я мог бы добавить margin:15px и быть счастливым туристом, но тогда у меня было бы 15px пространство над изображением, когда это первый элемент.

Я пытался использовать .alignleft:not(:first-line), но это не такработать, даже не добавляя изображение внутри тега p, поэтому у меня нет идей

Вопрос

Итак, в принципе, мой вопрос: возможно ли сделать эти полявести себя условно?

Answer 1

Попробуй так!

p img {
  float: left;
  margin: 15px 15px 15px 0px;
}

img {
  float: left;
  margin: 0px 15px 15px 0px;
}

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

Answer 2

Согласно вашему HTML, применяйте margin-top: 15px только тогда, когда img является дочерним (или последующим братом или сестрой) от p.

.alignleft {
  float: left;
  margin: 0px 15px 15px 0;
}

p > .alignleft {
  margin-top: 15px;
}

/* if the img is a following sibling, try this:

  p ~ .alignleft { margin-top: 15px }

*/

<img class="alignleft" src="https://via.placeholder.com/350x150" alt="" />
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>


<hr>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>