除了另一个,宽度是百分比,填充打破了线条

时间:2012-04-15 19:55:32

标签: css html

我设法创建div以表现为一列表格。但是,现在我想在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它崩溃了。如何解决?

2 个答案:

答案 0 :(得分:2)

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

  1. 以百分比形式指定保证金,例如margin:1%;
  2. 使用CSS3 box-sizing选项,例如
  3. webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

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

    box-sizing: border-box;

答案 1 :(得分: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>