Question

我们说我有一个<div>里面有10个浮动元素：

<div>
  <div class=floatme>...</div>
  <div class=floatme>...</div>
  ...(8 more)
</div>

根据可用的水平空间，其中一些将包裹到连续的行。

问：我怎么能说出第二行的样式呢？

<style>
  .floatme {
    float: left;
  }
  .floatme:if-wrapped-to-nth-line(2) {
    background: url("rainbows.png");
  }
</style>

＆＃13;

.app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #bbb;
  animation: 2s ease-in-out infinite alternate woosh;
}

.app, button {
  font-family: sans-serif;
}

.tabs {
  border-bottom: 2px solid #039;
}
.tabs button {
  background: #039;
  color: white;
  border: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.toolbar {
  background: white;
}
.toolbar > div {
  padding: 3px;
  float: left;
  border-right: 2px solid #bbb;
}
.toolbar > .right {
  float: right;
  border-right: 0;
}
.toolbar button {
  border: 2px solid #777;
}
.toolbar button:hover {
  background: #bbb;
}
.toolbar::after {
  display: table;
  content: '';
  clear: both;
}

@keyframes woosh {
  from {
    width: 300px;
  }
  to {
    width: 500px;
  }
}

＆＃13;

<div class=app>
  <nav class=tabs>
    <button>Tab 1</button>
  </nav>
  <nav class=toolbar>
    <div>
      <button>A</button>
      <button>B</button>
    </div>
    <div class=right>
      <button>Right</button>
      <button>side</button>
    </div>
    <div>
      <button>C</button>
      Description
    </div>
    <div>
      <button>D</button>
      <button>E</button>
      <button>F</button>
    </div>
    <div>
      <strong>Q</strong>: How to style second line?
      <button>G</button>
    </div>
    <div>
      <button>H</button>
      <button>I</button>
      Etc etc...
    </div>
  </nav>
</div>

＆＃13;

Answer 1

您可以提供元素类名称，并且不要尝试使用nth-child()，因为它的性能不佳。

<div>
  <div class=floatme one>...</div>
  <div class=floatme two>...</div>
  ...(8 more)
</div>

您也可以使用相同的想法使用CSS网格布局和BEM方法创建图库图像。

CSS网格布局： https://www.youtube.com/watch?v=jV8B24rSN5o&t=930s

BEM： https://www.toptal.com/css/introduction-to-bem-methodology

已包装到第n行的浮点数的CSS选择器

1 个答案: