如何使 div 堆叠成两列并使左列小于右列？答案

【问题标题】：How to make div stacked in two columns and have the left column smaller than the right one?如何使 div 堆叠成两列并使左列小于右列？
【发布时间】：2020-11-22 19:26:53
【问题描述】：

我想在一个 A4 (21x29.7cm) 文档的视图中将一堆 div 分成两列。第 1 列已满时必须使用第 2 列，这是一个重要要求。

我试图达到的结果必须如下所示：

还有这个：

我已经在 W3C here 上使用 column-count css 属性进行了测试

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-count: 2;
}
</style>
</head>
<body>

<h1>The column-count Property</h1>
<p>The column-count property defines the number of columns an element is divided into:</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

但是这种方法不允许我设置列宽和堆栈。

提醒：重要的是我只使用一个div来堆叠内容，如果它在页面/div的末尾，那么写在第二列=>它必须堆叠

我也尝试过使用 flex 的以下结构，因为我的要求是堆叠 div 并分成两列，第二列必须在左侧已满时使用。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    border: dotted 1px #f00;
    height: 7rem;
    overflow: hidden;
}

.item {
    width: 50%;
    height: 1rem;
    border: dotted 1px #0f0;
}

<div class="container">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
    <div class="item">f</div>
    <div class="item">g</div>
    <div class="item">h</div>
    <div class="item">i</div>
    <div class="item">j</div>
    <div class="item">k</div>
    <div class="item">l</div>
    <div class="item">m</div>
    <div class="item">n</div>
</div>

我可以改变结构，但它必须是一个堆栈，我也可以涉及一些 JavaScript。

为了示例而设置了高度，但是，只有div.container 将具有固定高度。

例如：

这不好：https://jsfiddle.net/ohqb9p71/
这几乎是好的，除了我不能设置列宽：https://jsfiddle.net/ThePendulum/8wnhyvx7/

我想向div 添加内容并填充左栏，更多内容应该放在右栏。

如何使用 HTML/CSS 或 JS 使左列 30% 和右列 70%？
如果不使用column-* 或flex css 属性，我怎样才能使<div> 堆叠成两列？

【问题讨论】：

标签： html css multiple-columns

【解决方案1】：

您的 css 属性不允许这种行为。您可以使用 css 网格。

.grid {
  display: grid;
   gap: 25px;
   grid-auto-flow: column;
    grid-template-columns: 0.25fr 0.75fr;
   grid-template-rows: 1fr 1fr 1fr 1fr;
}

.grid div {
  background: red;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

【讨论】：

@DimitriKopriwa 你为什么不直接使用gap？
您好，谢谢，您的代码示例要好得多，但是，所有项目都有一个附加的高度，这会导致不可取的空白，您知道如何删除它吗？ jsfiddle.net/4hpdna7v
对 div 使用类似 height:height: fit-content; 的东西。
使用height: fit-content; 则高度不会被拉伸，但divs 不会向上移动，这会导致堆叠块之间出现不必要的间距。使用background-color: white，没有任何区别，请参见：jsfiddle.net/4hpdna7v/2
嗨，科林，有什么困难吗？