html - div之间的间距相等

Question

Demo

你好，我这里有三个 div。我想在它的左侧和右侧提供相等的间距。我想让它通用。

我面临的问题

1.If i add more `div` element, it requires many CSS changes
2. What if content length increases? It ll decrease it's spacing.
3. I want to make it possible without using width and inline-block.

如果有任何可能的解决方案，请告诉我。如果我们“必须”使用宽度或内联 block ，也建议这样做。提前致谢。我的CSS如下:

.wrapper
{
  width: 100%;
  height: 60px;
  background-color: #454545;
}

.div1,.div2,.div3
{
  float: left;
  margin: 0 15% 0 10%;
  color: #fff;
}

Answer 1

如果您更改内容或更改列数，您正在使用的方法将不起作用。据我所知，以下是可能的解决方案:

选项 1:

.div {
    width:33.33%;
    display:inline-block;
}

缺点:

1) inline-block 在元素之间留下空白。注释掉元素之间的空格，即

2) 因为，列被赋予了宽度，随着列的变化，宽度也需要改变。

Demo here.

选项 2:

.wrapper {
    display:table;
    table-layout:fixed;
    width:100%;
}
.div {
    display:table-cell;
}

缺点:

1) 在 IE7 中不工作。

Demo here.