css - 最后一个 div 框在 margin-right 上的间距不等

Question

我在一个容器内有一堆 div，它们与右侧和底部的间距相等。 (即 margin-right 和 margin-bottom 是一样的) 下面是我的 jsfiddle: http://jsfiddle.net/wYCzJ/1/ 这是我的 CSS 代码:

.container {
  width: 100%;
  height: auto;
  display: inline-block;
}

.wrapper {
   position: relative;
  float: left;
  width: 25%;

}

.box {
    margin-bottom: 0.5em;
  margin-right: 0.5em;
  border: 1px solid;
  border-color:#DDD;
  padding: 0.5em;
  height: 150px;
}


.name{
  width: 95%;
  font-size: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.result {
  text-align: right;
  margin-top: 0.5em;
  font-weight: bold;
  margin-right: 0.75em;
}
.result-type {
  float:left;
  display:inline;
  font-size: 1.1em;
  display: inline;
}

.result-value {
  font-size: 1.5em;
  display: inline;
}

.no_data {
  font-size: 1.2em;
  color: darkgray;
}

.date {
  position: absolute;
  bottom: 1em;
  color: gray;
}

一切正常，除了最后一个 div 框向右有一些额外的间距(在本例中为 Test 5 框和 Test 7 框) 我有点需要周围相同的间距。有解决办法吗？

Answer 1

如果你添加:

body {
    margin: 0;
    padding: 0;
}

距离右边只有 5px

由您决定将 div 容器制作成距左侧和顶部 5px 的边距

---

我设法扭转了它:

body {
    padding: 0;
    margin: 0;
    margin-top: 0.5em;
    margin-left: 0.5em;
}

在 Chrome 和 FF 中对其进行了测试 - http://jsfiddle.net/elen/wYCzJ/3/

---

找到并采用了这个版本 - jsfiddle.net/elen/5CJ5e/131 - 看看它是否适合你 请注意 text-align: justify; 的组合, font-size: 0;外箱和内箱的高度。也使用 <span class="stretch"></span>对于 100% 宽度