如何在60％+ 40％寬度的兩個元素之間添加空格？

很難在標題中解釋，所以我會詳細說明。顯然我明白，額外的空間不能添加在兩個元素之間，相當於容器的100％寬度，但我想知道是否有辦法將寬度減少40px。如何在60％+ 40％寬度的兩個元素之間添加空格？

我非常有信心如果需要，我可以在JavaScript中做到這一點，但如果有更簡單的css解決方案可用，我寧願使用它。

爲了進一步解釋，我想一個40像素bewteen此圖像中看到了兩個白色的元素：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; 
}

來源

2017-08-09 Xander

只是想知道是什麼原因不只是讓你的百分比較小，並根據您的容器大小手動制定出像素計算？我之所以問這個問題，只是因爲calc（）不被許多瀏覽器所支持，所以根據你的目標受衆是什麼，它可能在某些瀏覽器上不起作用。只是好奇:) – grimesd

@grimesd - 現在所有瀏覽器都支持calc。只有IE的舊版本仍在使用中缺乏支持。 –

@ori drori謝謝你的澄清 – grimesd

使用calc()一個固定的量，以減少width。

的計算值（）函數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; 
}

或分割的2個元素之間的區別：

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

來源

2017-08-09 12:14:03

你也可以做到這一點與一個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>

來源

2017-08-09 12:31:01 Ikbel

grid-gap可以用來代替邊距;） –

@GCyrillus真的，我只是忘了它的名字lol謝謝！ – Ikbel

如何在60％+ 40％寬度的兩個元素之間添加空格？

回答

相關問題