代码之家 › 专栏 › 技术社区 › Devin

CSS条件边距(仅限CSS,无JS)

css-selectors css3 html5

4

Devin · 技术社区 · 6 年前

问题描述

.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>

.左对齐{
浮动:左;
边距: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 tag,所以我没主意了

所以,基本上,我的问题是:有没有可能让这些边距以一种有条件的方式运行?

2 回复 | 直到 4 年前

1

2

Michael Benjamin William Falcon 6 年前

根据您的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>

2

1

MadeInDreams 6 年前

这样试试!

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>