Question

我在div中写了一些纯css，html代码，这是屏幕宽度的80％，我把另外3个框放在一行中，它们是父宽度的30％。 但是在父div的右边有一个额外的填充，到目前为止我无法处理。 请有人给我一个提示删除它吗？

这是它的照片

以下是代码。

<!doctype html>
<html>
 <head>
   <title>CSS practice</title>
   <style>
         *{
           margin: 0;
           padding: 0;
          }
         body {
               background-color: grey;
              }
         .main {
                padding: 0;
                margin: 0 auto;
                width: 80%;
                background-color: #AAA;
                }
         .container {
                    display: inline-block;
                    width: 30%;
                    height: 30%;
                    margin: 1%;
                    background-color: white;
                    text-align: center;
                    }
   </style>
   </head>
   <body>
         <div class="main">
                           <span class="container">X</span>
                           <span class="container">X</span>
                           <span class="container">X</span>
                           <span class="container">X</span>
                           <span class="container">X</span>
                           <span class="container">X</span>
         </div>
    </body>
</html>

Answer 1

.container元素的宽度加左右边距不会达到100％，因此会有额外的空间。我在下面的代码中添加了一些注释。

*{
  margin: 0;
  padding: 0;
}
body {
  background-color: grey;
}
.main {
  padding: 0;
  margin: 0 auto;
  width: 80%;
  background-color: #AAA;
}
/* clearfix to keep container from collapsing when floating child elements */
.main:before,
.main:after {
    content: "";
    display: table;
    clear: both;
}
.container {
  /*display: inline-block;
  width: 30%;*/
  float: left;
  width: calc(100% / 3 - 2%); /* divide by number of columns and subtract the left and right margins */
  height: 30%;
  margin: 1%;
  background-color: white;
  text-align: center;
}

<div class="main">
  <span class="container">X</span>
  <span class="container">X</span>
  <span class="container">X</span>
  <span class="container">X</span>
  <span class="container">X</span>
  <span class="container">X</span>
</div>

Answer 2

也将text-align:center添加到.main课程当您将text-align:center添加到.container时，只有X会居中，但如果您想将框放在中心，则应将text-align:center添加到父div。

JSFiddle link

父母分裂右边的额外填充

2 个答案: