Div下一個，寬度爲百分數，填充符破壞行

Question

我設法創建了div s，就像一列表一樣。但是，現在我想在div之間填充。如果我做這樣的事情：

<div style="float:left; width:100%;"> 
    <?php 
    foreach ($datas as $rec) { ?> 
    <div style="float:left; width:100%; background-color: green;"> 
    <div style="margin: 0px; float:left; width: 25%; background-color: red;"><a href="<?php echo $rec['HTTP']; ?>" target="_blank"><?php echo $rec['LINKNAME']; ?></a></div> 
    <div style="margin: 1px; background-color: yellow;"><?php echo $rec['DESCRIPTION']; ?></div> 
    </div> 
    <?php } ?> 
    </div> 

因爲margin: 1px它分崩離析。如何解決這個問題？

Answer 1

<div style="float:left; width:100%;"> 
<?php 
foreach ($datas as $rec) { ?> 
    <div style="float:left; width:100%; background-color: green;"> 
     <div style="padding: 1px; float:left; width: 25%; background-color: red;"><a href="<?php echo $rec['HTTP']; ?>" target="_blank"><?php echo $rec['LINKNAME']; ?></a></div> 
     <div style="padding: 1px; background-color: yellow;"><?php echo $rec['DESCRIPTION']; ?></div> 
    </div> 
<?php } ?> 
</div> 

Answer 2

有2個解決方案，我可以看到這樣的：

1. 指定您的保證金，以百分比如margin:1%;
2. 使用CSS3 box-sizing選項，例如，

webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox, other Gecko */

box-sizing: border-box;