如何将CSS多列段落的文本流方向从“水平”更改为“垂直”？

Question

给定：一个干净的页面，其中一个<article>包含一些<p>段和一个全宽<img>。

我希望css多列不像A中那样流动，但是在B中，段落从顶部到底部然后从左到右流动。 <img>应停止此流动并填满整篇文章的宽度。之后再以与B相同的方式再说几个段落，直到相同的<article>结束。

目前，所有工作都有效，除了列在A中流动，而不是在B中。在CSS中我忽略了哪些智能规则？

• 我不想在这里触摸 clean HTML。没有额外的元素，类或ID。
• 仅添加用于选择和样式化当前现有元素的CSS：article，p，img
• 只有一个<article>.....</article>元素，因此img！之前和之后没有文章分割。

article p{
	width: 500px;
	margin: 0;
	text-align: justify;
	-webkit-column-count: 2;
	   -moz-column-count: 2;
			column-count: 2;
	-webkit-column-gap: 24px;
	   -moz-column-gap: 24px;
			column-gap: 24px;

	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	   	-ms-hyphens: auto;
			hyphens: auto;

	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	letter-spacing:-0.7px;
	word-spacing: -0.7px;
	color: #000;
}

article p:nth-of-type(n+2) {
	text-indent: 2em;
	margin-top: 20px;
}


img{
	width:500px;
	height:auto;
	margin-top: 20px;
}

<article>

<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>

<p>De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten.</p>

<img src="https://static.pexels.com/photos/23049/pexels-photo.jpg" alt=""/>

<p>Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen.</p>

<p>Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid. Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>

<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>

</article>

Answer 1

只需将columns属性提供给容器，而不是段落......

这是文本流程...现在，如果你想在文章里面给你的图像100％的宽度容器...好吧，你不能没有改变html

article {
text-align: justify;
	-webkit-column-count: 2;
	   -moz-column-count: 2;
			column-count: 2;
	-webkit-column-gap: 24px;
	   -moz-column-gap: 24px;
			column-gap: 24px;

	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	   	-ms-hyphens: auto;
			hyphens: auto;
}

article p{
	width: 500px;
	margin: 0;
	

	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	letter-spacing:-0.7px;
	word-spacing: -0.7px;
	color: #000;
}

article p:nth-of-type(n+2) {
	text-indent: 2em;
	margin-top: 20px;
}


img{
	width:500px;
	height:auto;
	margin-top: 20px;
}

<article>

<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>

<p>De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten.</p>

<img src="https://static.pexels.com/photos/23049/pexels-photo.jpg" alt=""/>

<p>Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen.</p>

<p>Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid. Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>

<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>

</article>