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

Answer 2

你可以实现这是纯粹的CSS：

<强> HTML

<div class="left">LEFT DIV</div>
<div class="right">RIGHT DIV</div>

<强> CSS

.left,
.right{
    float:left;
    height:100px;
    width:50%;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.left{
    background:#58c;
}
.right{
    background:#b00;
}

http://jsfiddle.net/T23Bf/

BOX-SIZING

内容框 （默认值）

这是CSS2.1指定的宽度和高度的行为。指定的宽度和高度（以及最小/最大属性）分别适用于元素的内容框的宽度和高度。元素的填充和边框布局并在指定的宽度和高度之外绘制。

<强>边界框

填充和边框包含在指定的宽度/高度中。

此元素上指定的宽度和高度（以及最小/最大属性）确定元素的边框。也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。通过从指定的宽度减去各边的边界和填充宽度来计算内容宽度和高度。和＆＃39;身高＆＃39;特性

Answer 3

以下是它的外观：http://codepen.io/anon/pen/KuJzs

box-sizing: border-box;是此处的关键

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>

CSS：

.stats-box > div {
  width: 50%;
  float: left;
  padding: 25px;

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box; 
}

Answer 4

使用 flexbox （作为即将推出的最佳布局解决方案）......

我很喜欢直接布局元素和内容元素之间的分离 - 工作可靠，易于维护并将网格保持为网格和内容作为内容。

<强> CSS

/* layout elements */
.row { clear:both; }
.row:after { clear:both; height:0; visibility:hidden; content:"." }
.col { float:left; width:50% }

/* content elements */

.content { margin:10px; padding:10px; 
    /* free to pad and position as you like */ }

<强> HTML

<div class="row">
  <div class="col">
    <div class="content"> <p> text and free paddings here </p> </div>
  </div>
  <div class="col">
    <div class="content"> <p> More text and free paddings here </p> </div>
  </div>
</div>

在页面上拉伸两个div

4 个答案:

BOX-SIZING