文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使文本停留在一列中

问如何使文本停留在一列中
EN

Stack Overflow用户

提问于 2019-07-30 03:19:08

回答 1查看 100关注 0票数 0

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

我刚刚做了一个有2列的div，希望它能正确地包含我的文本。

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

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

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-30 03:44:29

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57260186

复制

相似问题

问如何使文本停留在一列中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使文本停留在一列中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使文本停留在一列中
EN