Question

有一个页面工作正常，大部分the page that isn't都是直接从中复制的。它是一个响应式网格布局，有12列。该页面有一行，里面有两个div，每个都有50％的宽度，而第二个div包裹在第一个下面，第一个占据整个宽度加上右边缘。它验证。我没看到什么？

HTML：

<div id="container">
    <div class="rowR">
    <div class="darkYellow col-6 col-m-6">
        <p>
        Moonwards exists...
        </p>
        <p>
        An appreciation... 
        </p>
        <p>
        The Virtual Moon Colony...
        </p>
        </div>
        <div class="col-6 col-m-6 black30">
        <p>
        email: info@moonwards.com
        </p>
        </div>
    </div>
    </div>
</div>

CSS：

[class*="col-"] {
    padding: 15px;
    width: 100%;
    }
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@media only screen and (min-width: 850px) {
    .col-4r6 {width: 50%;}
}
@media only screen and (min-width: 500px) {
    .col-m-4r6 {width: 33.33%; margin-left: 16.66%;}
}
.rowR div, .rowR h1, .rowR h2, .rowR h3 {
    float: right;
}
.rowL:after, .rowR:after {
    content: "";
    clear: both;
    display: block;
}
#container {
    margin-top: 160px;
    width: 100%;
    clear: both;
}

Answer 1

这是因为您已将.col-4r6设为margin-left: 16.66%，同时.darkYellow的宽度为94%。

box-sizing不包含为保证金设置的值。它只计算宽度，高度，填充和边框的大小，因此延伸到容器外部。

如果您将.darkYellow更改为以下内容，则应该可以正常工作。

.darkYellow {
    background-color: rgba(50, 50, 0, 0.7);
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    width: 83.33%;
}

为什么这些div包裹并超过利润？

1 个答案: