CSS多个多列div [英] CSS Multiple multi-column divs

问题描述

我有一堆项目（文本，图像，混合内容等），我想显示。用户可以定义该项目出现在什么行和什么列。例如，在行1中，可以有两个项目/列，两个图像。在第二行中，可以有三个项目/列，一个具有图像，另两个作为纯文本。哦，并且用户可以指定任何特定列/图像/项目的宽度。

我有一个使用多个表的解决方案。实质上，每一行都是一个新表。

我想知道我是否只能使用div？

CSS foo是缺乏，我试图从网站复制示例，我没能得到它的工作。现在我有这样的东西：

 [每行] 
 [div style =float：none] 
 [ for each column] 
 [div style =float：left] 
 [content] 
 [/ div] 
 [/ div] 
 [br] 
 
 
 
 
但是一切都是相互重叠的。
 
 
 
 ：
 
 
 
因此，div可以用于多行和不同数量的列吗？
解决方案
他们肯定可以！你正在寻找的基本效果是这样的：
 
 
 
 
 
 
  #wrapper {width：900px;} .item {height：200px; width：200px; margin：10px; float：left;}  
 
 < div id =wrapper > < div class =item> Something< / div> < div class =item>其他< / div> < div class =item>有点酷< / div> < div class =item>有点甜的< / div> < div class =item>一些正确的东西< / div>< / div>  
 
 
 
 $ b 
这样做是设置一个固定宽度的容器（ #wrapper ）并填入blocks。因为每个都有一个固定的宽度和左浮动，他们将在网格中排队。因为我为每个设置的宽度/边距，你应该得到每行4。如果您需要间隔符，只需输入空白DIV即可获取右侧行/列的内容。
 
I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item. 

I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for the most part.

I'm wondering if I can use just divs?

Now my CSS foo is lacking, and I tried to copy examples from the web, and I haven't been able to get it working. Right now I have something like this:
[for each row]
  [div style="float: none"]
  [for each column]
    [div style="float: left"]
      [content]
    [/div]
[/div]
[br]
But everything is overlapping each other.

I've also tried using "position: relative", but things look even more borked.

So can divs actually be used for multiple rows and different number of columns?
解决方案
They sure can! The basic effect (it sounds like) you're looking for is like so:



#wrapper {
    width: 900px;
}
    
.item {
    height: 200px;
    width: 200px;
    margin: 10px;
    float: left;
}

<div id="wrapper">
    <div class="item">Something</div>
    <div class="item">Something else</div>
    <div class="item">Something cool</div>
    <div class="item">Something sweet</div>
    <div class="item">Something just ok</div>
</div>





So what this would do is set up a fixed-width container (the #wrapper) and fill it with "blocks". Because each has a fixed width and is floated left, they'll line up in a grid. Because of the width/margin I've set for each, you should get 4 per row. If you need spacers, just put in blank DIVs to get the content on the right row/column.

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