將100％的寬度設置為 <body> 廣告代碼的最大寬度：1200px

Question

我有一個max-with: 1200px的肢體類max-with: 1200px 。

我有這個原因是因為我希望我最大的類.row具有最大寬度。

但是我希望我的類.fullrow div的寬度為100％（但不能為1200px的100％）。

您是否看到解決此問題的好方法？ 我當時正在考慮將這個"max-width: 1200px; ”放在<body>之外，但是我看不到這樣做的好方法。

演示： http ： //jsfiddle.net/bLcyvfd6/3/

HTML：

 <body>
    <div class="fullrow">
        fullrow
    </div>
    <div class="row">
        <div class="col">
           col
        </div>
    </div>
    <div class="row">
        <div class="col">
           col
        </div>
    </div>
</body>

CSS：

 body{
        width: 100%;
        min-width: 320px;
        max-width: 1200px;
        margin:0 auto;
    }

    .fullrow{
        width: 100%;
        margin:0 auto;
        background: green;
    }

    .row{
        padding: 20px;
        width: 100%;
        min-height: 1px;
        float:left;
        background:yellow;
    }

    .col{
        display: inline-block;
        float: left;
    }

Answer 1

我看到的最簡單的方法是刪除body元素上的max-width屬性，並將其添加到.row元素中。

body{
    width: 100%;
    min-width: 320px;
    margin:0 auto;
}

.fullrow{
    width: 100%;
    margin:0 auto;
    background: green;
}

.row{
    padding: 20px;
    width: 100%;
    min-height: 1px;
    float:left;
    background:yellow;
    max-width: 1200px;
}

.col{
    display: inline-block;
    float: left;
}

這是更新的小提琴： http : //jsfiddle.net/bLcyvfd6/6/

Answer 2

您需要從.row max-width屬性中減去填充。

.row
{
   /*other styles*/
   padding:20px;
   max-width: 1160px;/*1200 - (20*2)*/
}

鏈接到示例更新：此處

編輯：

如果您不想限制.fullrow寬度，則可以像這樣從body標簽中刪除max-width 。

body
{
    width: 100%;
    min-width: 320px;
    margin:0 auto;
}

將100％的寬度設置為 <body> 廣告代碼的最大寬度：1200px

問題描述

2 個解決方案

解決方案1
1 2015-01-12 19:33:56

解決方案2
0 2015-01-12 19:30:32

將100％的寬度設置為 <body> 廣告代碼的最大寬度：1200px

問題描述

2 個解決方案

解決方案1 1 2015-01-12 19:33:56

解決方案2 0 2015-01-12 19:30:32

解決方案1
1 2015-01-12 19:33:56

解決方案2
0 2015-01-12 19:30:32