使两个CSS元素并排填充他们的容器，带边距 [英] Make two CSS elements fill their container, side-by-side, with margin

问题描述

我想要两个元素占用父元素宽度的确切百分比，但是我也需要边距来使它们分开。我有以下标记：

 < 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; 
} 
  

正如你可以在。

解决方案

技术＃1 - Modern CSS3 calc（）

使用这。

---

技巧＃2 - 旧式包装

通过堆积多个元素。对于这种情况，我们将每个元素包装在一个宽度为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; / *确保50％包括padding * / 
 -moz-box-sizing：border-box; / *对于Firefox * / 
 -webkit-box-sizing：border-box; / *对于旧的移动Safari * / 
} 
 .element {
 background：＃009; color：#cef; text-align：center; 
 display：block; 
} 
  

演示：

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

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:

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

解决方案

Technique #1 - Modern CSS3 calc()

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

.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/

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

 

---

Technique #2 - Old School Wrapping

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:

<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/

​

 

---

Technique #3 - Using (CSS) Tables

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/

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.

这篇关于使两个CSS元素并排填充他们的容器，带边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！