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

Posted 2023-03-06

技术标签:

【中文标题】让两个 CSS 元素并排填充它们的容器，并带有边距【英文标题】：Make two CSS elements fill their container, side-by-side, with margin 【发布时间】：2012-12-19 08:42:25 【问题描述】：

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

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

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

我怎样才能让它们适合空间？遗憾的是，这种情况下没有box-sizing:margin-box。

【问题讨论】：

哦，它的目的是假设父包装的宽度是未知的和/或灵活的；它被硬编码为 300px 的事实仅用于演示。将孩子设置为width:142px 不是可接受的一般解决方案。 :) 【参考方案1】：

虽然我强烈建议尽可能使用 Phorgz 的 calc() 技术，但我也想提出一种老式的方法，它只使用一个包装器和 position: relative 来实现效果。

.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

【讨论】：

【参考方案2】：

对于我来说，以上所有技术都不能在跨浏览器上始终如一地工作。我发现使用display:table-cell 的技术略有不同，它允许我将 2 个或更多元素彼此相邻放置。 Here is an example of it in action。

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

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

【讨论】：

我不确定上述方法对您有何帮助，但确实如此，当这种技术是我在回答中列出的第三个技术时。我错过了什么？对不起，应该更仔细地阅读您的答案。你的第三种方法是像我一样使用表格单元格，所以它对我有用。虽然我在回答中删除了一些不需要的代码。【参考方案3】：

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

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;

【讨论】：

这个特殊简化测试用例的视觉外观恰好是一个红色边框（这样你就可以看到父容器的宽度），但描述的一般情况是一个边距，防止两个元素视觉上感人。不幸的是，颜色为transparent 或rgba(0,0,0,0) 的边框会导致元素的背景颜色透出，从而无法达到预期的效果。可以用 background-clip: padding-box 制作透明边框（可以和快捷方式背景属性结合使用）【参考方案4】：

技术 #1 - 现代 CSS3 `calc()`

使用CSS3's 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+     */

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

^{有关哪些浏览器和版本支持此功能的详细信息，请参阅 http://caniuse.com/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;          /* 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;

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

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

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

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