html - 如何让文字停留在一栏

Question

我正在写歌曲分析。我有一个包含 2 列的 div:一列用于歌词，另一列用于分析。问题是歌词太长了(我猜？)继续分析专栏。

我刚刚制作了一个包含 2 列的 div，并希望它能正确包含我的文本。

#analysis {
    column-count: 2;
    column-gap: 25px;
    column-rule: 3px solid skyblue;
}

那么，如何将我的文本(歌词、分析)保存在适当的栏中？

Answer 1

CSS 列不是您想要用于您的用例的内容。相反，尝试一下 flex-box 或 CSS 网格:

flex 盒子

.song-analysis {
  display: flex;
  width: 100;
}

.song-analysis div {
  width: 50%;
  padding: 10px;
}

.lyrics {
  background-color: blue;
  color: white;
}

.analysis {
  background-color: yellow;
}

<div class="song-analysis">

  <div class="lyrics">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! 
  </div>
  <div class="analysis">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad!
  </div>

</div>

CSS 网格

.song-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.song-analysis div {
  padding: 10px;
}

.lyrics {
  background-color: blue;
  color: white;
}

.analysis {
  background-color: yellow;
}

<div class="song-analysis">

  <div class="lyrics">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad! 
  </div>
  <div class="analysis">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi reiciendis obcaecati nesciunt provident ipsum tenetur dolorem deleniti voluptatibus, odio ipsam blanditiis. Velit corporis vero officia itaque alias, voluptatibus quod ad!
  </div>

</div>