在CSS中限制列的大小 [英] Re sizing columns with restriction in CSS

问题描述

所以我有一个奇怪的问题.到目前为止，这就是我 的内容.在jfiddle中，有3列单词，但实际上，我会在2到5之间. 问题在于列可以很长，但宽度很短.我想要的是能够将其余的空白用于列.我阅读了本指南，它给了我一些建议，并添加了以下内容到div列:

So I have a weird question. This is what I have so far. In the jfiddle, there's 3 columns of words, but in reality, I will be between 2 and 5. The problem is the columns can be long, but short in width. What I'd like is to be able to use the rest of the white space for the columns. I read this guide which gave me some suggestions and I added the following to the column divs:

div {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
float:left;
}

但是，它没有提供我想要的内容，因为当页面更改大小时，各列会相互重叠，这绝对是错误的.有什么办法可以使列(div)换行以占用任何空白，但是如果页面太小，则每个div应该由一列组成，并且应该进行水平滚动.

However, it doesn't give me what I want, because when the page changes size, the columns go under each other, which is absolutely BAD. Is there any way I can have the columns (divs) wrap to take up any white space, but if the page becomes too small, then each div should be comprised of one column, and there should be horizontal scrolling.

本质上，我有2个问题:

In essence, I have 2 questions:

1)当页面调整大小时，我不希望div彼此靠拢 2)如果有空白，我希望div拆分并占用该空白.

1)I don't want the divs to go underneath each other when the page resizes BUT 2) if there is white space, I'd like the divs to split and take up that empty space.

有人有什么建议吗?谢谢！

Does anyone have any suggestions? Thanks!

推荐答案

您可以看到仅通过设置列的宽度使用CSS列是否足够好:(运行下面的代码段或

you can see if using the column CSS is good enough with only setting the width of the colums: (run the code snippet below or this fiddle )

section {
    padding: 1em;
    -moz-column-width:5em;
    -webkit-column-width:5em;
    column-width:5em;
}
span {
    display: block;
    width: 5em;
}

<section>
    <div><span>column a</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>

    <div><span>column b</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>

    <div><span>column c</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>last word</span></div>    

  
</section>

这篇关于在CSS中限制列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！