CSS：高度不规则的平铺框

Question

我想将盒子平铺成如下图所示，

所有框的宽度和高度都相同，接受其中一个我需要在某些情况下将其高度更改为 500px。但我不能让它正确！

http://rokhsanafiaz.co.uk/dump/1.php

这是我的 CSS，

* { 
    margin: 0; 
    padding: 0; 
    }

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { 
    font-size: 1em; 
    font-weight: normal; 
    font-style: normal;
    }

ul,ol,li { 
    list-style: none; 
    margin:0px; 
    padding:0px;
    }

fieldset,img { 
    border: none;
    padding:0px;
    margin:0px;
    float:left; /** a must so that there is no extra gap at the bottom of each image **/
    }

div {
    clear:both;
    border:1px solid #0066FF;
    overflow:hidden;
    }

#main {
    width:785px;
    /**height:837px;  a must for IE, to be handled in jquery **/
    position:relative !important; /** essential for sticking #company at bottom **/
    border:1px solid #000;
    }

#main div {
    clear:none;
    }

.item-global {
    width:335px;
    height:146px;
    background:#ffffff;
    padding:15px;
    position:relative;
    float:left;
    margin: 0px 15px 15px 0px;
    }

.item-global h3 {
    border:0px solid #000;
    margin:0px 0px 5px 0px;
    }

.item-global h3  a{
    font-size:20px;
    color:#0099cc;
    }

.item-global p{
    margin:0px;
    padding:0px;
    font-size:14px;
    line-height:18px;
    clear:both;
    }

.item-global-current {
    height:400px;
    }

还有我的标记，

<!-- item-global -->
    <div class="item-global round-corner">

        <h3><a href="#">Topic 1</a></h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p>

        <a href="#" class="button-plus"><span>more</span></a>

    </div>
    <!-- item-global -->

    <!-- item-global -->
    <div class="item-global round-corner item-global-current" style="float:none; clear:none;">

        <h3><a href="#">Topic 2</a></h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p>


        <a href="#" class="button-top-minus"><span>less</span></a>
        <a href="#" class="button-bottom-minus"><span>less</span></a>

    </div>
    <!-- item-global -->


    <!-- item-global -->
    <div class="item-global round-corner">

        <h3><a href="#">Topic 3</a></h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p>

        <a href="#" class="button-plus"><span>more</span></a>

    </div>
    <!-- item-global -->

    <!-- item-global -->
    <div class="item-global round-corner">

        <h3><a href="#">Topic 4</a></h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p>

        <a href="#" class="button-plus"><span>more</span></a>

    </div>
    <!-- item-global -->


    <!-- item-global -->
    <div class="item-global round-corner">

        <h3><a href="#">Topic 5</a></h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p>

        <a href="#" class="button-plus"><span>more</span></a>

    </div>
    <!-- item-global -->

    <!-- item-global -->
    <div class="item-global round-corner">

        <h3><a href="#">Topic 6</a></h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy Lorem Ipsum has been the industry's standard dummy</p>

        <a href="#" class="button-plus"><span>more</span></a>

    </div>
    <!-- item-global -->

如果你知道诀窍，那就太棒了！谢谢！

Answer 1

我认为，单独声明两个列容器而不是将所有 7 个元素混合在一起会更容易。 An example.
至少，这是我通常采用的原则：容器可以水平或垂直拆分为子容器，但不能同时拆分两个方向。

<div class="column">
    <div class="normal">1</div>
    <div class="normal">3</div>
    <div class="normal">4</div>
</div>
<div class="column">
    <div class="large">2</div>
    <div class="normal">5</div>    
</div>

Answer 2

如何添加：

.item-global-current + div { margin-top:-195px; }

适用于 Firefox 3.6.8。