Question

很难在标题中解释，所以我要详细说明。显然我明白在两个等于容器宽度100％的元素之间不能添加额外的空间，但是我想知道是否有办法将宽度减少一个40px。 / p>

我非常有信心，如果需要，我可以在JavaScript中使用它，但如果有更简单的css解决方案，我更愿意使用它。

为了进一步说明，我想在此图片中看到两个白色元素的40px：https://gyazo.com/551af056aa516eac2ce3c7b16949a0fa

如你所见，我有一个左右柱的大容器，宽度分别为40％和60％。

HTML：

<div id="homeContentContainer" class="homeContentContainer">

    <div class="leftCol">
        <div class="buyPanel panel">
        </div>
        <div class="sellPanel panel">
        </div>
    </div>
    <div class="rightCol">
        <div class="buyPanel panel">
        </div>
    </div>

</div> <!-- content container -->

CSS：

.homeContentContainer {
    position: absolute;
    width: 60%;
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

.leftCol {
    width: 40%;
    height: 100%;
    float: left;
}

.rightCol {
    width: 60%;
    height: 100%;
    float: right;
}

.buyPanel {
    width: 100%;
    height: 230px;
    margin: 40px 0 0 0;
}

.sellPanel {
    width: 100%;
    height: 230px;
    margin: 40px 0 0 0;
}

Answer 1

使用calc()将width缩减固定金额。

calc（）CSS函数可以在<length>，<frequency>的任何地方使用，需要<angle>，<time>，<number>或<integer>。用calc（），你可以执行计算以确定CSS属性值。

您可以减少其中一个的宽度：

.homeContentContainer {
    position: absolute;
    width: calc(60% - 40px);
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

或者分割两个元素之间的差异：

.homeContentContainer {
    position: absolute;
    width: calc(60% - 20px);
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

.leftCol {
    width: calc(40% - 20px);
    height: 100%;
    float: left;
}

Answer 2

您也可以使用CSS grid执行此操作。看看这个例子：

.container {
  display: grid;
  background-color: #eee;
  height: 200px;  
  /* This makes .left width 40% and .right 60%*/
  grid-template-columns: 40% 60%;
  grid-gap: 40px; /* 40px gap between .left and .right */
  width: 60%;
  margin: 0 auto;
  text-align: center;
}

.left {
  background-color: yellow;
}

.right {
  background-color: orange;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

如何在60％+ 40％宽度的两个元素之间添加空间？

2 个答案: