CSS：高度不规则的瓦片盒

我想让盒子看起来像下面的图片

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

这是我的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 -->

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人Lorem Ipsum已成为行业标准假人

---

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

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

<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>

1.
3.
4.
2.
5.

如何添加：

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

---

适用于Firefox 3.6.8。

您的图片与标记不一致。你的照片上说你应该有7个div，但你只有6个div。对不起，我忘了把7号框放在我的标记中。这些盒子会随着时间的推移而增加。谢谢，我同意。我正要提出这个建议，谢谢。我也在考虑把它们分成两列！我在想可能还有别的把戏！谢谢！：-）有趣的解决方案！我能问一下+div是什么意思吗？为什么是-195px？thanksIt是一个相邻的同级选择器，表示“直接在应用了.item全局当前类的任何元素后面的div”。更多信息：使用“-195px”，我将第三个盒子拉回到第一个盒子下方的孔中。问题是-它不会占用以前的空间，为下面的演员腾出空间。明白了。谢谢是的，它几乎达到了我想要的。但他又是个杀手！不要介意。。。非常感谢！