如何在 CSS 中使用 % width 将 div 分成 5 个相等的部分

Question

如何在 CSS 中使用 % width 将 div 分成 5 个相等的部分

我想将宽度为 100% 的 div“tile-container”分成 5 个相等的部分。我以为在里面创建 5 个宽度为 25% 的 div 可以解决问题，但事实并非如此。容器似乎太小了。这是我的代码：

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

MrG*_*eek 5

问题在于 html 中 div 之间的间距，要忽略可以添加到的间距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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

另一种方法是注释掉空格：

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，9 月前
查看次数：	8524 次
最近记录：	8 年，9 月前