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> をその子の高さに拡張する方法を垣間見る

ただし、スクロールバーを表示したくない場合は、auto ではなく、overflow:hidden を使用してください。

于 2013-10-01T09:46:11.480 に答える