具有动态宽度的一行划分（对齐）

Question

我有一个左右填充的容器。在这个容器里面有两个div，它们应该并排，两者之间有空隙。现在因为此空间已修复但站点响应，所以两个text-div必须具有动态宽度。这就是为什么我不能使用％-width。

我想text-align: justify它会起作用，但事实并非如此。

这是JSFiddle：http://jsfiddle.net/qGw48/

这里的JSFiddle应该是这样的：http://jsfiddle.net/4ekSm/（它只能用于％-widths）

Answer 1

只是改变：

div＃container＆gt; div {

display：inline-block;

}

为：

div#container > div {
    display: table-cell;
}

UPDATED FIDDLE

Answer 2

如果您将宽度值考虑在填充中，则可以相当容易地完成此操作。所以我使用的是风格：

box-sizing: border-box;

http://jsfiddle.net/qGw48/1/

这意味着当您设置宽度时，填充将包含在该值中。

Answer 3

你见过这个http://jsfiddle.net/cUCvY/1/

吗？

我认为它解决了你所寻找的问题

Two Divs next to each other, that then stack with responsive change

您可以在其中一个方框中添加一些保证金，即

  .left{
   margin-right: 5px; 
  }