Html 让两个 CSS 元素并排填充它们的容器，并带有边距

Make two CSS elements fill their container, side-by-side, with margin

提问by Phrogz

I want two elements to take up an exact percent of the parent's width, but I also need margins on them holding them apart. I have the following markup:

我希望两个元素占据父元素宽度的精确百分比，但我还需要它们之间的边距将它们分开。我有以下标记：

<div class='wrap'>
  <div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>?

.wrap {
  background:red;
  white-space:nowrap;
  width:300px;
}
.element {
  background:#009; color:#cef; text-align:center;
  display:inline-block;
  width:50%;
  margin:4px;
}

As you can see in http://jsfiddle.net/NTE2Q/the result is that the children overflow the wrapper:

正如您在http://jsfiddle.net/NTE2Q/中看到的，结果是孩子们溢出了包装器：

How can I get them to fit within the space? Sadly, there is no box-sizing:margin-boxfor this case.

我怎样才能让它们适应空间？可悲的是，没有box-sizing:margin-box这种情况。

回答by Phrogz

Technique #1 - Modern CSS3 calc()

技术 #1 - 现代 CSS3 calc()

Using CSS3's calc()length, you can do this by setting the width of the .elementto:

使用CSS3 的calc()length，您可以通过将宽度设置.element为：

.element {
  width: 49%;                     /* poor approximation for old browsers    */
  width: calc(50% - 8px);         /* standards-based answer for IE9+, FF16+ */
  width: -moz-calc(50% - 8px);    /* support for FF4 - FF15                 */
  width: -webkit-calc(50% - 8px); /* support for Chrome19+ and Safari6+     */
}

Demo: http://jsfiddle.net/NTE2Q/1/

演示：http: //jsfiddle.net/NTE2Q/1/

^{See http://caniuse.com/calcfor details on which browsers and versions support this.}

^{有关哪些浏览器和版本支持此功能的详细信息，请参阅http://caniuse.com/calc。}

 

 

---

---

Technique #2 - Old School Wrapping

技术 #2 - 老式包装

Calculations can be made by piling up multiple elements. For this case, we wrap each 'element' in a wrapper that is 50% wide but with a 4px padding:

可以通过堆积多个元素来进行计算。对于这种情况，我们将每个“元素”包装在一个 50% 宽但填充为 4px 的包装器中：

<div class='wrap'>
  <div class='ele1'>
    <div class='element'>HELLO</div>
  </div><div class="ele1">
    <div class='element'>WORLD</div>
  </div>
</div>?

.ele1 {
    display:inline-block;
    width:50%;
    padding:4px;
    box-sizing:border-box;          /* Make sure that 50% includes the padding */
    -moz-box-sizing:border-box;     /* For Firefox                             */
    -webkit-box-sizing:border-box;  /* For old mobile Safari                   */
}
.element {
    background:#009; color:#cef; text-align:center;
    display:block;
}

Demo: http://jsfiddle.net/NTE2Q/2/

演示：http: //jsfiddle.net/NTE2Q/2/

?

?

 

 

---

---

Technique #3 - Using (CSS) Tables

技术 #3 - 使用 (CSS) 表格

The same result can be made by treating the wrapper as a 'table' and each element as a cell within the same row. With this, whitespace between elements is not important:

通过将包装器视为“表格”并将每个元素视为同一行中的一个单元格，可以得到相同的结果。有了这个，元素之间的空白就不重要了：

<div class='wrap'>
  <div class='element'>HELLO</div>
  <div class='element'>WORLD</div>
</div>?

.wrap {
    background:red;
    width:300px;
    display:table;
    border-spacing:4px
}
.element {
    background:#009; color:#cef; text-align:center;
    width:50%;
    display:table-cell;
}
?

Demo: http://jsfiddle.net/NTE2Q/4/

演示：http: //jsfiddle.net/NTE2Q/4/

Note that this last technique collapses the 4px spacing between the two elements, while the first two techniques cause 8px to appear between the two items and 4px at the edges.

请注意，最后一种技术会折叠两个元素之间的 4px 间距，而前两种技术会导致两个项目之间出现 8px，边缘出现 4px。

回答by Evgeny

What you are describing is basically a border. So why not to use CSS border property with background-clip? Just don't forget appropriate vendor prefixes.

你所描述的基本上是一个边界。那么为什么不将 CSS 边框属性与 background-clip 一起使用呢？只是不要忘记适当的供应商前缀。

http://jsfiddle.net/NTE2Q/8/

http://jsfiddle.net/NTE2Q/8/

.wrap {
    background-color: red;
    white-space:nowrap;
    width:300px;
}
.element {
    background:#009; color:#cef; text-align:center;
    display:inline-block;
    width:50%;
    border:4px solid rgba(0,0,0,0);
    box-sizing: border-box;
    background-clip: padding-box;
}

回答by Joe Komputer

None of the above techniques worked consistently enough cross browser for me. I found a slightly different technique using display:table-cellallowed me to place 2 or more elements next to each other. Here is an example of it in action.

上述技术对我来说都没有足够的跨浏览器工作。我发现了一种稍微不同的技术，它display:table-cell允许我将 2 个或更多元素并排放置。这是它在行动中的一个例子。

The CSS:

CSS：

    display:table-cell;
    background:#009; color:#cef; text-align:center;
    width:22%; /*Set percentage based on # of elements*/
    border:4px solid rgb(255,0,0);/*no longer need background to be red, just make border red*/

You no longer even need the wrapper since the div is now treated as a <td>.

您甚至不再需要包装器，因为 div 现在被视为<td>.

回答by Christophe Marois

Though I strongly suggest using Phorgz's calc()?technique whenever possible, I also want to propose an old-school way of doing this that uses only one wrapper and position: relativeto achieve the effect.

尽管我强烈建议calc()尽可能使用 Porgz 的? 技术，但我也想提出一种仅使用一个包装器并position: relative实现效果的老派方法。

.two-blocks-by-side() LESS Mixin:

.two-blocks-by-side() LESS Mixin：

.two-blocks-by-side(@padding) {
  padding: @padding (@padding + @padding / 2);
  font-size: 0;

  & > div {
    position: relative;
    display: inline-block;
    font-size: initial;
    width: 50%;

    &:first-child { left: -1 * @padding / 2 };
    &:last-child { right: -1 * @padding / 2 };
  }
}

JS Bin example

JS Bin 示例