Question

我有一个max-with: 1200px的身体类。

我有这个因为我希望我班级.row最大的div有这个最大宽度。

但是我希望我的类.fullrow的div具有100％的宽度（但不是1200px的100％）。

您是否看到了解决此问题的好方法？我在想这个"max-width: 1200px;＆＃34;在<body>之外但是我没有看到这样做的好方法..

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

我能看到的最简单方法是删除max-width元素上的body属性，并将其添加到.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)*/
}

链接到示例更新：here

编辑：

如果您不想限制.fullrow宽度，请从正文标记中删除max-width。

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

将100％的宽度放在标签内最大宽度为1200px的div中

2 个答案: