0

我正在为个人网站编写网格系统。实际上，我的代码如下所示：

    <div class="page">
        <div class="row">
            <div class="col span_1">Column 1, Row 1</div>
            <div class="col span_1">Column 2, Row 1</div>
            <div class="col span_1">Column 3, Row 1</div>
            <div class="col span_1">Column 4, Row 1</div>
        </div>

        <div class="row">
            <div class="col span_4">Column 1, Row 2</div>
        </div>

        <div class="row">
            <div class="col span_1">Column 1, Row 3</div>
            <div class="col span_1">Column 2, Row 3</div>
            <div class="col span_1">Column 3, Row 3</div>
            <div class="col span_1">Column 4, Row 3</div>
        </div>

        <div class="row">
            <div class="col span_1 expandable">Column 1, Row 4</div>
            <div class="col span_3">Column 2, Row 4</div>
        </div>

        <div class="row">
            <div class="col span_1 expandable">Column 1, Row 5</div>
            <div class="col span_2">Column 2, Row 5</div>
            <div class="col span_1 expandable">Column 3, Row 5</div>
        </div>
    </div>

这是CSS：

.col {
    border: 5px solid #333;
    background-color: red;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}

.page {
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;
}

/* Phones */
@media screen and (max-width: 599px) {
    .col {
        margin-left: 1%;
        padding: 0 1.5%;
    }

    .row .col:first-child {
        margin-left: 0;
    }

    .span_1, .span_2, .span_3, .span_4 {
        width: 100%;
        margin-left: 0;
    }
}

/* Tablets */
@media only screen and (min-width : 600px) and (max-width : 1023px) {
    .col {
        margin-left: 0.4%;
        padding: 0 1.5%;
    }

    .span_1 {
        width: 49.4%;
    }

    .span_2, .span_3, .span_4, .expandable {
        width: 99.2%;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .col {
        margin-left: 1%;
        padding: 0 1.5%;
    }

    .row .col:first-child {
        margin-left: 0;
    }

    .span_1 {
        width: 24.25%;
    }

    .span_2 {
        width: 49.5%;
    }

    .span_3 {
        width: 74.75%;
    }

    .span_4 {
        width: 100%;
    }
}

调整大小时效果很好，但我有问题。页面和行类没有高度，所以我不能使用背景或填充。另外，我无法将填充设置为 .col 。我做错了什么？我该如何解决这个问题？

如果需要，您可以在这里进行测试：http://jsfiddle.net/3qkVG/

4

1 回答 1

1

了解将父级 <div> 扩展到其子级的高度

但是，如果您不希望滚动条出现，请使用溢出：隐藏而不是自动。

于 2013-10-01T09:46:11.480 回答