html - 在页面上拉伸(stretch)两个 div

Question

我目前在 this fiddle 中有代码:

HTML

    <div class="stats-box">
        <div class="stats-title">Stats</div>
        <div class="stats-group">
            <div class="stats-team red"><div class="stats-amount">367</div></div>
            <div class="stats-team yellow"><div class="stats-amount">412</div></div>
        </div>
    </div>

SCSS 没有花哨的 SCSS，只有嵌套和变量，所以基本上是普通的 CSS :-)

$red:       #e74c3c;
$yellow:    #f1c40f;
$white:     #ecf0f1;
.stats-box {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: normal;
    color: white;
    background-color: $white;

    .stats-title {
        color: black;
        font-weight: 700;
        text-align: center;
    }

    .stats-group {
        padding: 10px 0px;

        .stats-team {
            display: inline-block;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 10px;
            width: 50%;

            .stats-amount {
                background: rgba(0,0,0,0.13);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                padding: 7px 0px 11px 0px;
                width: 100%;
                height: 16px;
                text-align: center;
                margin: 0 auto;
            }
        }
    }

}


.red {
    color: $white;
    background-color: $red;
}

.yellow {
    color: $white;
    background-color: $yellow;

}

我想要做的是让红色和黄色框恰好占据屏幕的 50%，并且并排放置。我也希望他们保留 10px 的内边距，但我似乎做不到。一旦超过 48%(这显然取决于屏幕分辨率，其他人可能会有所不同)，黄色框就会下降。

我知道问题出在这个特定位，但我不知道如何解决它。

.stats-team {
    padding: 10px;
}

我是太简单了，还是要求太多了？

Answer 1

如果您将 box-sizing: border-box; 添加到红色和黄色的 div，您将能够将宽度设置为 50% 并添加任意数量的填充。您还需要添加 float: left; 以便元素彼此相邻放置；

.stats-team {
  box-sizing: border-box;
}

FIDDLE