css - 如何在css中设置响应边距（关于应用元素的宽度/高度）？

Question

我想知道是否有办法在 CSS 中设置“响应边距”。这是我的意思的说明：

<div style="width:100%;">

  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">
  <div style="width:18%; margin:0 1%;">

</div>

我希望margin足够聪明，能够理解“我想要 1% 的width”并应用 0% 的heightfor top/bottom。

不幸的是，这不是默认行为，那么您如何管理它？实际上我正在使用javascript，但我正在尝试优化我的性能。

Answer 1

根据这个http://mattsnider.com/css-using-percent-for-margin-and-padding/

如果您以百分比设置边距或填充是父元素宽度的百分比，那么您可以这样做

<div style="width:100%; height: 100px;">

    <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>
      <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>
      <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>
      <div style="width: 18%"><div style="padding: 0 10%"><div style="width:100%; height: 20px;"></div></div></div>

    </div>

在这你必须使用 box-sizing:border-box

没有办法宽度包含：内部宽度+填充+边框+边距

一个例子http://jsfiddle.net/98FGe/2/

Answer 2

这样的事情怎么样？http://jsfiddle.net/uLra3/1/

使用 cherniv 的 box-sizing 理念。

code

Answer 3

假设这个 html 代码：

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

...您可以“浮动”它们：http: //jsfiddle.net/3rwhd/2/

.wrap {
    width: 100%;
}

.item {
    float: left;
    width: 18%;
    margin: 0 1%;
}

...或“内联块对齐”它们（如果您不想要外边距）：http: //jsfiddle.net/3rwhd/1/

.wrap {
    width: 100%;
    text-align: justify;
}

/* this element will force justificaton */
.wrap:after {
    content:'';
    display: inline-block;
    width: 90%;
    height: 0;
}

.item {
    display: inline-block;
    width: 18%;
}

...或“表格>表格单元”它们：http: //jsfiddle.net/3rwhd/3/

html:

<div class="wrap">
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
    <div class="item"><div></div></div>
</div>

CSS：

.wrap {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    vertical-align: top;
    width: 20%;
}

.item > div {
    display: block;
    margin: 0 1%;
}

/* optional; remove outer margins */

.item:first-child > div {
    margin-left: 0;
}

.item:last-child > div {
    margin-right: 0;
}