Question

＆＃13;

SELECT @id=SCOPE_IDENTITY('TABLEA')

＆＃13;

.num_pad_wrap {
    width:300px;
    background:#eee;
    height:300px;
}
.num_pad_wrap div {
    float: left;
    width: 30%;
    background: #666C77;
    height: 50px;
    margin:1%;
    border: 1px solid #000;
}

＆＃13;

我正在尝试做一个计算器。正如您所看到的，我无法计算出适合容器的边距。如果我可以硬编码像素，那很容易，但在我的情况下，我必须做百分比。如何为各方平均设定保证金？

Answer 1

CSS：

.num_pad_wrap {
    width: 300px;
    background:#eee;
    height:300px;
}

.num_pad_wrap .row {
    margin-left: 2%;
}
.num_pad_wrap .row div {
    float: left;
    width: 30%;
    background: #666C77;
    height: 50px;
    margin:1%;
    border: 1px solid #000;
}

HTML：

<div class="num_pad_wrap">
    <div class="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="row">
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div class="row">
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="row">
        <div>0</div>
        <div>C</div>
    </div>
</div>

由于您的3个按钮占宽度的96％（32％* 3），因此剩下的总利润率为4％。

您可以围绕row类包裹每一行，然后将margin-left设置为总保证金的一半，在这种情况下为2%。

Answer 2

您可以尝试这样做： Demo

 .num_pad_wrap {
    overflow: hidden;
    width:300px;
    background:#eee;
    height:auto;
    padding:1.2% 1.2% 0% 1.2%;
}
.num_pad_wrap div {
    background: #eee;
    float: left;
    margin-left: 3.2%;
    margin-bottom: 3.2%;
    background: #666C77;
    height: 50px;
    width: 31.2%;
    margin-bottom: 3.2%;
}
/* clear col */
 .num_pad_wrap div:nth-of-type(3n+1) {
    margin-left: 0;
    clear: left;
}

HTML：

<div class="num_pad_wrap">
    <div>1</div>
     ........
    <div>C</div>
</div>

css 3列网格应用相等的边距

2 个答案: