浮球同裕

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>