如何使用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个相等的片段

回答

相关问题