如何在弹性布局中重复换行上的第一个元素？

问题描述 投票：0回答：2

我有很多序列。每个序列都有一个名称和一个字符数组。我必须将字符垂直对齐：

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA

如果字符数组变长（或者可见空间很小），就会出现换行，我想要以下显示：

sequence1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA
sequence2 GCGTAGCTCAGCTTCGATCCGATCGATATAAAGCTAGA
sequence3 GCTTCGGAGCGGCTAGCTAGAGATAGCCGATCGATCGA
sequence1 GGATTAGCTAGCTAGACTACGGATCGA
sequence2 GGAGGATCGGCTTCGATCGATTCTTAG
sequence3 GGCATTTAGGGGGATTATATTTCTCTA

序列的长度可能非常长。有必要重复序列名称。 我怎样才能做到这一点？

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.stack {
    display: flex;
    flex-direction: column;
    font-family: courier;
    font-weight: bold;
    font-size: 24px;
}
<div class="container">
    <div class="stack">
        <div>Sequenz1</div>
        <div>Sequenz2</div>
        <div>Sequenz3</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>g</div>
        <div>h</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>c</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>g</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>c</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>t</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>g</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>c</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>t</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>g</div>
        <div>g</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>c</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>t</div>
        <div>c</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>a</div>
        <div>g</div>
    </div>
    <div class="stack">
        <div>c</div>
        <div>g</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>t</div>
        <div>c</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>a</div>
        <div>t</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>a</div>
        <div>t</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>c</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>g</div>
        <div>a</div>
    </div>
    <div class="stack">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>a</div>
    </div>
</div>

如果我调整窗口大小。 Flex 包裹如预期。但我再次需要这些名字。

html css flexbox
2个回答
0
投票

使用某些数据属性在 :before class 中写入序列名称 然后你可以在每个 Flex 中重复该名称来尝试

0
投票

为了获得一个完全可扩展的系统，我认为你需要 JS，但这里有一个仅 CSS/HTML 的方法，它使用文本阴影重复标签，并使用网格将它们与文本字符串分开。

我想如果这是 DNA，其中可能有数百万个字符，那么它不会很实用。

这里更多的是作为一个有趣的演示，供任何遇到不太大问题的人使用。

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
}

.seqences {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.labels {
  text-shadow: 0 3lh 0px black, 0 6lh 0px black, 0 9lh 0px black, 0 12lh 0px black, 0 15lh 0px black, 0 18lh 0px black, 0 21lh 0px black, 0 24lh 0px black, 0 27lh 0px black, 0 30lh 0px black, 0 33lh 0px black, 0 36lh 0px black, 0 39lh 0px black, 0 42lh 0px black, 0 45lh 0px black, 0 48lh 0px black, 0 51lh 0px black, 0 54lh 0px black, 0 57lh 0px black;
}

.stack {
  display: flex;
  flex-direction: column;
  font-family: courier;
  font-weight: bold;
  font-size: 24px;
}
<div class="container">
  <div class="stack labels">
    <div>Sequenz1</div>
    <div>Sequenz2</div>
    <div>Sequenz3</div>
  </div>
  <div class="seqences">
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>h</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>c</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>t</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>g</div>
      <div>g</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>t</div>
      <div>c</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>a</div>
      <div>g</div>
    </div>
    <div class="stack">
      <div>c</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>t</div>
      <div>c</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>a</div>
      <div>t</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>a</div>
      <div>t</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>c</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>g</div>
      <div>a</div>
    </div>
    <div class="stack">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
      <div>a</div>
    </div>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.