网格中HTML元素之间的巨大差距

Question

我正在尝试为我网站上的其中一个网页创建一个3列网格。一些元素跨越2列，而其他元素仅跨越1列。这给我带来了一个间距问题，因为我喜欢这种元素，以及＃34; float＆＃34;直到它上面最接近的元素，以最小化间隙和被困空白区域的数量。例如，以下是对页面现状的简单再现：

这就是我喜欢的样子：

You can check out the fiddle here.

这是CSS：

*{
    color: white;
}

.clear{
clear:both;
}

.out_wrap_blk {
    padding: 5px;
    background: black;
    float:left;
    margin: 10px;
}
.out_wrap_gry {
    padding: 5px;
    background: #323232;
    float:left;
    margin: 10px;
}
.in_wrap_grn {
    border: 1px solid #0CFF0E;
    padding: 20px;
}
.in_wrap_blk {
    border: 1px solid black;
    padding: 20px;
}
.col_1 {
    width: 298px;
}
.col_2 {
    width: 668px;
}
.col_3 {
    width: 1038px;
}

和HTML：

<div id="page_wrap">
    <div id="page_head">
        <div class="out_wrap_blk">
            <div class="in_wrap_grn col_3">
                 <h1>Test!!!</h1>
Bacon ipsum dolor amet chicken drumstick spare ribs t-bone leberkas brisket pork chop bacon beef ribeye pastrami. Tail bresaola pork andouille cow doner. Kevin short loin turducken picanha swine. Fatback prosciutto shank filet mignon short ribs capicola biltong pork loin landjaeger sausage beef meatball.</div>
        </div>
    </div>
    <div class="out_wrap_gry">
        <div class="in_wrap_blk col_2">Andouille doner beef pancetta picanha tenderloin. Boudin picanha ham hock, ham brisket pancetta tongue beef ribs kevin swine.
            <br>Ham hock shank tongue pastrami turkey frankfurter. Strip steak pork filet mignon andouille ground round shoulder biltong jowl fatback short ribs pork belly cupim pig. Ground round venison cupim swine cow, jowl chuck tenderloin ham hock tongue jerky. Tail fatback pork loin pig. Tongue frankfurter leberkas kielbasa, hamburger strip steak bacon pork loin chuck biltong meatloaf venison picanha.</div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">Turducken pork ball tip frankfurter tongue chicken sirloin sausage rump. Picanha turkey doner porchetta biltong kevin. Pastrami meatloaf pork belly, shoulder kevin jowl strip steak boudin. </div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">T-bone strip steak short ribs meatloaf tail swine ribeye flank pancetta tongue filet mignon rump sirloin. Kielbasa pork loin frankfurter sirloin brisket cow pork shank shankle swine corned beef meatloaf pig bacon. Alcatra beef ribs shankle tail, meatball corned beef pork chop jerky short ribs tongue porchetta fatback landjaeger.</div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_2">Filet mignon chicken pork chop, landjaeger flank tail ball tip hamburger.</div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">Chuck short ribs porchetta ball tip pork belly brisket jerky doner ribeye sirloin tenderloin pork andouille pancetta. Prosciutto biltong salami meatloaf spare ribs pork belly short loin corned beef shoulder ribeye pig landjaeger tongue. Venison swine spare ribs beef.</div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">Ribeye biltong fatback, capicola short loin ball tip kevin pork loin shankle salami meatball pork bresaola beef meatloaf. Pig short ribs tenderloin, cupim bresaola kevin fatback shoulder cow chicken jowl.</div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">Capicola meatloaf tri-tip beef tongue. Tenderloin picanha andouille flank beef ribs swine, pork loin filet mignon pork chuck. Prosciutto filet mignon venison ham, shankle chuck kevin bresaola frankfurter. Ribeye jowl beef kevin prosciutto turducken picanha sausage drumstick jerky kielbasa tongue meatloaf turkey. </div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">Shoulder pork chop chuck, beef ribs pork fatback shank prosciutto tail porchetta.</div>
    </div>
    <div class="out_wrap_blk">
        <div class="in_wrap_grn col_1">Bacon sausage frankfurter landjaeger ham pig pancetta tongue rump turducken. Salami shank sausage meatloaf, ball tip landjaeger short ribs boudin pork loin turducken jerky meatball ham hock sirloin prosciutto. </div>
    </div>
    <div class="clear"></div>
</div>

如何实现这一目标并消除这些额外空间？

Answer 1

通常我会解释而不仅仅是发布一个解决方案。但在这种情况下，通过打字可以解释太多。基础知识是：您将包装器设置为max-width，因此布局不会太大，但在缩小时会缩小。然后你需要将其分解为列。两个包裹左侧和右侧，然后另外两个包裹较大的框下方的较小列：

<强> HTML

<div class="wrapper">
    <div class="column1">
        <div class="box large"></div>
        <div class="sub-column1">
            <div class="box small"></div>
            <div class="box large"></div>
        </div>
        <div class="sub-column2">
            <div class="box large"></div>
            <div class="box small"></div>
        </div>
    </div>
    <div class="column2">
        <div class="box small"></div>
        <div class="box large"></div>
        <div class="box large"></div>
    </div>
</div>

<强> CSS

.wrapper{
    max-width: 500px; 
    overflow: hidden;
    margin: auto;
}

.column1{
    width: 60%;
    float: left;
    overflow: hidden;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.column2{
    width: 40%;
    float: left;
}

.sub-column1, .sub-column2{
    width: 50%;
    float: left;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.sub-column2{
    padding: 0;
}

.box{
    width: 100%;
    background: black;
    padding: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.large{
    height: 100px;
}

.small{
    height: 15px;
}

FIDDLE