Question

我正在创建一个网站，并希望它显示为框和矩形的网格。我有一个6x6网格的相对较小的左浮动div。它们工作正常，整齐地放在一个900宽的包装div中。如果我想要一个水平矩形，我只需将这些正方形中的一个放宽两倍（考虑到两者之间的边距，但这是不相关的）并删除旁边的那个。没问题。

当我想要将矩形设为TALL两次时，我遇到了这个问题。它最终将它左边的所有东西都撞到了同一行，就像它一行一样。对于两倍大的正方形（2x2网格单位）也会发生同样的情况。

这是jsfiddle中的代码： http://jsfiddle.net/zucw9/ 从本质上讲，我怎样才能让8,9和10向上移动一个空格，或者为6,7和8移动到那个空隙中，留下9和10，其中6和7现在是什么？

Answer 1

http://jsfiddle.net/zucw9/10/

这个解决方案不是一个很好的解决方案，但它确实有效。

（我更改了一些名称，所以我可以更好地阅读它。（.grid_rect_tall成为.grid_tall等等。margin-left:10px; margin-right: 0px等...成为margin: 5px;）

基本上你为高一个指定了一个-ve margin-bottom和一个额外的边距，所以其他元素不重叠。

.grid_square, .grid_long, .grid_tall
{
    float: left;
    margin: 5px; 
    background: #6CC;
}

#main{
    position: relative;
    width: 905px;
    overflow: hidden;
    border: 1px solid black;
    padding: 5px;
}

.grid_square{
    width: 140px;
    height: 140px;
}

.grid_long{
    width: 290px;
    height: 140px;
}

.grid_tall{
    width: 140px;
    height: 290px;
    margin-bottom: -150px;  
}
.rbuffer
{
    margin-right: 155px;
}

.lbuffer
{
    margin-left: 155px;
}

我仍然可以使用我的评论并使用：http://960.gs或css3网格布局：http://w3.org/TR/css3-grid-layout

编辑： - 我认为我最好先说一下为什么这不是一个好的解决方案。简单地说：如果你想改变页面的布局，你必须改变项目的类，以及必须改变CSS。

还创建了一个包含更多元素的元素来展示可能性：http://jsfiddle.net/zucw9/11/（或em代替px因为我感到无聊。http://jsfiddle.net/zucw9/15/）

Answer 2

布局是标准的，应该如何显示。我建议使用另一个div来包装出现在较高div之前的潜水。但这不是一个非常灵活的解决方案。

编辑：移动

    <div class="grid_square">8</div>
    <div class="grid_square">9</div>
    <div class="grid_square">10</div>

在

之后

层次结构更高

<div class="grid_square">2</div>

应该修复它。

Answer 3

我希望你的想法如下

代码：

<div id="main">
        <div class="grid_square">1</div>
        <div class="grid_rect_long">2</div>
        <div class="grid_rect_tall">3</div>
        <div class="grid_square">4</div>
        <div class="grid_square">5</div>
    <div style="clear:both"></div>
    <div>
        <div class="grid_square">6</div>
        <div class="grid_square">7</div>
        <div class="grid_square">8</div>
        <div class="grid_square">9</div>
        <div class="grid_square">10</div>
</div>
    </div>

垂直浮动/重叠问题

3 个答案: