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;