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

Question

我正在尝试为我网站上的其中一个页面创建一个 3 列网格。一些元素跨越 2 列，而其他元素仅跨越 1 列。这对我造成了一个间距问题，因为我希望元素可以 "float" 到它上方最近的元素，以最大限度地减少间隙量和被困的白色 space。例如，这是页面现在的一个非常简单的再现：

我希望它看起来像这样：

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>

我怎样才能做到这一点并消除那些额外的 spaces？

Answer 1

通常我会解释而不只是 post 一个解决方案。但是在这种情况下，需要通过打字来解释的东西太多了。基础知识是：您将包装器设置为 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

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

Big Gaps Between HTML Elements in Grid

html

css

grid

spacing