Question

我想分割我的div＆＃34; tile-container＆＃34;宽度为100％分为5个相等的部分。我认为在内部创建5个div，宽度为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来{{1} }}：

＆＃13;

.tile

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: