如何使用CSS中的％寬度將div劃分爲5個相等的片段

我想將div的「tile-container」以100％的寬度劃分爲5個相等的片段。我認爲在25％的寬度內創建5個div可以解決問題，但它不會。容器似乎要小。這裏是我的代碼：如何使用CSS中的％寬度將div劃分爲5個相等的片段

<head> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-10 col-md-offset-1"> 
       <div class="tile-container"> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div>   
       </div> 
      </div> 
     </div> 
    </div> 
</body>

而且stylsheet.css文件：

.tile-container{ 
    position: relative; 
    border: solid #BDBDBD 2px; 
    margin: 5px 0px; 
    width:100%; 
    } 

.tile{ 
    width: 20%; 
    min-height:22px; 
    border: 1px #BDBDBD solid; 
    display: inline-block; 
}

來源

2017-09-03 Mark

（1）我想你的意思是20％，而在你的問題不是25％ - 你有20％的CSS。（2）你爲什麼不把它們變成寬度爲2的列？您已經在使用網格系統。（3）工作片段可以幫助向我們展示問題，以便我們幫助 – FluffyKitten

問題是與在div之間出現的HTML的間距，就不理你可以添加font-size:0到.tile-container的間距，然後使用特定font-size到.tile：

.tile-container{ 
 
    position: relative; 
 
    border: solid #BDBDBD 2px; 
 
    margin: 5px 0px; 
 
    width:100%; 
 
    font-size:0; /* add */ 
 
} 
 

 
.tile{ 
 
    font-size:20px; /* or whatever you want */ 
 
    width: 20%; 
 
    min-height:22px; 
 
    border: 1px #BDBDBD solid; 
 
    display: inline-block; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-10 col-md-offset-1"> 
 
       <div class="tile-container"> 
 
        <div class="tile">A</div> 
 
        <div class="tile">B</div> 
 
        <div class="tile">C</div> 
 
        <div class="tile">D</div> 
 
        <div class="tile">E</div>   
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

另一種方法是註釋掉的空間：

.tile-container{ 
 
    position: relative; 
 
    border: solid #BDBDBD 2px; 
 
    margin: 5px 0px; 
 
    width:100%; 
 
} 
 

 
.tile{ 
 
    width: 20%; 
 
    min-height:22px; 
 
    border: 1px #BDBDBD solid; 
 
    display: inline-block; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-10 col-md-offset-1"> 
 
     <div class="tile-container"> 
 
      <div class="tile">A</div><!-- 
 
     --><div class="tile">B</div><!-- 
 
     --><div class="tile">C</div><!-- 
 
     --><div class="tile">D</div><!-- 
 
     --><div class="tile">E</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-09-03 19:41:15

工作！ font-size：0px是擺脫div之間空間的普遍方式嗎？ – Mark

我想這個術語是跨瀏覽器，是的，它是。 –

如何使用CSS中的％寬度將div劃分爲5個相等的片段

回答

相關問題