Question

我将这种情况作为一个数字

但是我希望在3个方框（33％）的左边距和边距右边。但： - 如果我申请保证金左：10px..threre就是这种情况

我希望第一个盒子的左边有相同的边距，在盒子之间和最后一个盒子的右边。

怎么办？

我的代码：

PHP

 <?php 
   $my_archives=wp_get_archives(array(
  'type'=>'yearly', 
   'format' => 'custom',
   'before' => '<span class="archivio-anno-list">hello<br>',
   'after' => '<br></span>',
   'show_post_count'=>true, 
   'limit'=>20, 
   'post_type'=>'issue_number', 
 ));

 print_r($my_archives); 

?>

CSS

.archivio-anno-list {

   float:left;
}

Answer 1

而不是使用margin转到padding，然后将您的内容放在这些column类中。此布局后面还有 Bootstrap Framework 。 5px的值在合并时会导致10px的阴沟。

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.row:after {
  display: table;
  content: '';
  clear: both;
}

.column {
  float: left;
  width: 33.33%;
  padding-left: 5px;
  padding-right: 5px;
}

.box {
  border: 1px solid #f00;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="column">
      <div class="box">content</div>
    </div>
    <div class="column">
      <div class="box">content</div>
    </div>
    <div class="column">
      <div class="box">content</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你可以在另一个答案中使用flexBox，但是如果你想使用float：left，你需要计算你的宽度

将5px的左右边距设置为方框，总共在框之间，有10px的空间

然后每个Name的{{1}}为width（100％/ 3） - box（5左边距+ 5右边距）

现在出现问题，因为第一个框左边只有5个像素，而右边框只有5个像素，你可以通过将33.33%添加到10px

因为我不知道你的HTML结构，我只是在这里猜测。见下面的SNIPPET

padding:0 5px

.wrapper

Answer 3

好的，我找到了解决方案，谢谢大家！

我的css代码

.archivio-anno-list {float:left;margin-left:1%;width:32%;}

Answer 4

我的评论中提到的%方法：

在边距和宽度中使用％太简单了：）

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  background:yellow;
}

.wrapper {
  width: 100%;
  float: left;
}

.box {
  float: left;
  width: 32%;
  text-align: center;
  margin-left:1%;
  
  background:blue;
}

＆＃13;

<div class="wrapper">
  <div class="box">
    test
  </div>
  <div class="box">
    test
  </div>
  <div class="box">
    test
  </div>
</div>

＆＃13;

Answer 5

 .box  {
        float: left;
      width: 32%;
      text-align: center;
       margin-right:1%;
      background:blue;  
    }

    .box:nth-child(3n+2) {
      margin-right: 0%;
    }

浮动和相同的边距

5 个答案: