如何使用 % width in CSS divide div 分成 5 个相等的部分

Question

我想divide我的div"tile-container"宽度为100%分成5等份。我认为创建 5 divs inside 宽度为 25% 会解决问题，但事实并非如此。容器似乎很小。这是我的代码：

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

Answer 1

问题在于 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>

如何使用 % width in CSS divide div 分成 5 个相等的部分

How to divide div into 5 equal pieces using % width in CSS

html

css

width