浮球同裕

Question

我有这种情况的数字

，但我想利润率左缘和右的3个箱（33％）。 但是： - 如果我申请保证金左：10px..threre是这种情况

我想同裕左第一boxe的，箱子之间和去年boxe的权利。

怎么办？

我的代码：

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类中。 此布局之后引导框架为好。 当组合时，5px的值有助于排水沟10px。

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

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

Answer 2

可以使用Flexbox将作为另一种回答说，但如果你想使用浮动：左，你需要计算你的宽度

组为5px的左右页边距如此在总的箱，所述箱之间，有一个10px的空间

那么每个box是33.33%（100％/ 3）的width - 10px（该5升EFT保证金+ 5右边缘）

，因为现在第一箱只有5px的左边，而右边的框中只有5px的右边有一个问题，你可以改变这种通过添加padding:0 5px到.wrapper

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

.wrapper { 
 
    float: left; 
 
    width: 100%; 
 
    background: red; 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
} 
 

 
.box { 
 
    float: left; 
 
    width: calc(33.33% - 10px); 
 
    background: blue; 
 
    margin: 0 5px; 
 
    height: 200px; 
 
}

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

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

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

 
    </div> 
 

 
</div>

Answer 3

好的片段中，我找到了解决办法，感谢大家！

我的CSS代码

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

Answer 4

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

保证金和宽度此使用％是太容易了:)

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

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