相关疑难解决方法(0)

使用CSS自动流动2列文本

我有类似于以下代码:

<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
Run Code Online (Sandbox Code Playgroud)

如果可能的话,我想,如果没有标记,会导致此文本流入两列(左侧为1-3,右侧为4-6).我犹豫使用a添加列的原因<div>是客户通过WYSIWYG编辑器输入了这个文本,因此我注入的任何元素都可能被后来或者莫名其妙地杀死.

html javascript css css3 two-columns

61
推荐指数
4
解决办法
10万
查看次数

使网格容器填充列不是行

我希望我的网格像这样垂直填充:

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.
Run Code Online (Sandbox Code Playgroud)

相反,它会像这样水平填充:

1 2 3
4 5 6
7 8 9
Run Code Online (Sandbox Code Playgroud)

我想指定网格中的列数,而不是行数.

这就是我的div使用内联CSS样式的样子:

<div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <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>9</div>
</div>
Run Code Online (Sandbox Code Playgroud)

重要的是我的网格宽3列,但我希望项目按列填充,而不是按行填充.CSS Grid中有可能吗?我已经阅读了这篇https://css-tricks.com/snippets/css/complete-guide-grid/,但没有看到有关订单的任何信息.

CSS Flexbox有flex-direction没有像CSS Grid那样的属性?

html css css3 flexbox css-grid

34
推荐指数
4
解决办法
9209
查看次数

使用CSS或JavaScript自动两列

我正在开发一个网站,我的客户希望各种文章的文本分为两列.有点像在报纸上?所以它看起来像:

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.     
Run Code Online (Sandbox Code Playgroud)

[我非常努力想要写出来的东西]

有没有办法只用CSS就可以做到这一点?我宁愿不必使用多个div.我也愿意使用JavaScript,但我真的很糟糕,所以请帮助我们.我想也许JavaScript可以计算内容div中有多少<p>,然后根据它移动它们的后半部分?也许?建议将不胜感激:D

javascript css two-columns

11
推荐指数
3
解决办法
1万
查看次数

标签 统计

css ×3

css3 ×2

html ×2

javascript ×2

two-columns ×2

css-grid ×1

flexbox ×1