css - Div next other, width are percents, paddings breaks the lines

Question

I managed to create divs to act like a column of tables. However, now I want to padding between divs. If I do something like this:

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

because of margin: 1px it falls apart. How to fix that?

Answer 1

我可以看到两种解决方案：

1. 以百分比形式指定您的保证金，例如margin:1%;
2. 使用 CSS3box-sizing选项，例如

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

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

box-sizing: border-box;

Answer 2

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