是否可以在水平面上制作CSS3列？ [英] Is it possible to make CSS3 columns on a horizontal plane?

问题描述

我想知道是否可以水平生成CSS3列。

例如。如果我有段落a，b，c和d，我给他们列数：2输出将是

ac

bd

我想创建一个列，使输出成为

ab

cd

有人知道在使用css3列时是否可以这样做？

我更喜欢我的页面是可扩展的，这就是为什么我宁愿使用列，以便列计数将自动产生正确的数量相比，屏幕尺寸。 / p>

原始页面大多使用3-4列

解决方案

如果您为段落指定了最小/最大宽度，则段落宽度和浮动左侧应该有效。它应该使用一个变量宽度的包装元素，但如果你不允许段落缩放有限的宽度，可能会中断。

  p {
 float：left; 
 max-width：160px; 
 min-width：100px; 
 margin：20px; 
} 
 
 div {// wrapper 
 width：480px; 
} 
  

jsFiddle

不要忘记清除列后的元素中的浮动。

I would like to know if it is possible to produce CSS3 columns horizontally.

for ex. if I have paragraphs a, b, c, and d and I give them "column-count: 2" the output would be

a c

b d

I would like to create the column so that the output would become

a b

c d

Does anyone know if this is possible while using css3 columns?

I'd prefer my page to be scalable and that's why I'd rather use columns so that the column-count would automatically produce the right amount of columns compared to the screen size.

The original page uses mostly 3-4 columns

解决方案

Giving the paragraphs a width and floating left should work if you specify a min/max width to the paragraphs. It should work with a variable width wrapper element but may break if you don't allow the paragraphs to scale much with restricted widths.

p {
    float: left;
    max-width: 160px;
    min-width: 100px;
    margin: 20px;
}

div { //wrapper
    width: 480px;
}

jsFiddle

Don't forget to clear the float in the element after the columns.

这篇关于是否可以在水平面上制作CSS3列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！