如何在響應div之間設置空格？

我是新來css寫了這樣的html代碼：
如何在響應div之間設置空格？

<div class="col-1">A</div> 
     <div class="col-1">B</div> 
     <div class="col-1">C</div> 
     <div class="col-1">D</div> 
     <div class="col-1">E</div> 
     <div class="col-1">F</div> 
     <div class="col-1">G</div> 
     <div class="col-1">H</div> 
     <div class="col-1">I</div> 
     <div class="col-1">J</div> 
     <div class="col-1">K</div> 
     <div class="col-1">L</div>

，這是我css：

.col-1 { 
      width: 58px; 
      background-color: chocolate; 
     }

寫出的代碼實現這一目標輸出：
CLICK TO SHOW

但我的結果是這樣的：
THIS LINK

我該如何解決這個問題？謝謝。

來源

2017-02-22 chert chertopert

圖片無法上傳請稍候上傳 –

不給後臺直接到山坳，只需添加子元素，讓背景的孩子，讓你能夠看到div標籤之間的空間。 –

您可以將保證金margin: 1px;只需添加到您的col-1內容是這樣的：

.col-1 { 
 
    width: 58px; 
 
    background-color: chocolate; 
 
    margin: 1px; 
 
    /*I just added this to make them inline */ 
 
    display: inline-block; 
 
}

<div class="col-1">A</div> 
 
<div class="col-1">B</div> 
 
<div class="col-1">C</div> 
 
<div class="col-1">D</div> 
 
<div class="col-1">E</div> 
 
<div class="col-1">F</div> 
 
<div class="col-1">G</div> 
 
<div class="col-1">H</div> 
 
<div class="col-1">I</div> 
 
<div class="col-1">J</div> 
 
<div class="col-1">K</div> 
 
<div class="col-1">L</div>

它會給你預期的結果，請注意您可以用想要的像素進行編輯。

來源

2017-02-22 09:08:21

這是工作，謝謝我的朋友。 –

9分鐘後接受你的回答 –

@chertchertopert很棒，很高興它有幫助。 –

我會推薦使用新的flexbox佈局。瀏覽器支持已經非常好（http://caniuse.com/#feat=flexbox），如果需要，您可以添加一些供應商前綴。

.col-wrapper { 
 
    display: flex; 
 
} 
 

 
.col-1 { 
 
    width: 58px; 
 
    background-color: chocolate; 
 
    margin: 0px 6px; 
 
}

<div class="col-wrapper"> 
 
    <div class="col-1">A</div> 
 
    <div class="col-1">B</div> 
 
    <div class="col-1">C</div> 
 
    <div class="col-1">D</div> 
 
    <div class="col-1">E</div> 
 
    <div class="col-1">F</div> 
 
    <div class="col-1">G</div> 
 
    <div class="col-1">H</div> 
 
    <div class="col-1">I</div> 
 
    <div class="col-1">J</div> 
 
    <div class="col-1">K</div> 
 
    <div class="col-1">L</div> 
 
</div>

來源

2017-02-22 09:13:20 Connum

.main{float: left; width: 100%; overflow: hidden; background: #eee; box-sizing: border-box;} 
 
.col-1{float: left; width: 8%; box-sizing: border-box; overflow: hidden; padding: 5px; border: 1px solid #000; margin: 1%; background: #3C3}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <style type="text/css"> 
 
    \t \t \t .main{float: left; width: 100%; overflow: hidden; background: #eee; box-sizing: border-box;} 
 
\t \t \t .col-1{float: left; width: 8%; box-sizing: border-box; overflow: hidden; padding: 5px; border: 1px solid #000; margin: 1%; background: #3C3} 
 
\t </style> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
\t \t <div class="col-1">A</div> 
 
     <div class="col-1">B</div> 
 
     <div class="col-1">C</div> 
 
     <div class="col-1">D</div> 
 
     <div class="col-1">E</div> 
 
     <div class="col-1">F</div> 
 
     <div class="col-1">G</div> 
 
     <div class="col-1">H</div> 
 
     <div class="col-1">I</div> 
 
     <div class="col-1">J</div> 
 
</div>   
 

 
</body> 
 
</html>

來源

2017-02-22 09:20:56

Responsive RWD html css – 2017-02-22 09:22:40

如何在響應div之間設置空格？

回答

相關問題