时间戳

首页 > 解决方案 > 像书籍内容一样显示文本

css - 像书籍内容一样显示文本

问题描述

我想设计一个内容，它的文本将分为两列。请参考下图以获得更好的想法。它应该自动调整它的大小，因为数据是动态的。

在此处输入图像描述

您的帮助将不胜感激。谢谢。

标签： csssass

解决方案

请检查我的代码笔。希望这会帮助你。添加列间距和宽度 -

column-width: 14em;
column-gap: 2em;

例如——

<div class="conatiner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum velit laoreet id donec ultrices tincidunt arcu. A diam maecenas sed enim ut sem viverra. Vestibulum sed arcu non odio euismod lacinia. 
</div>

和CSS -

.container {
  max-width: 800px;
  margin: 0 auto;
  column-width: 14em;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

检查工作示例

推荐阅读