Question

我设法创建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它崩溃了。如何解决？

Answer 1

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

以百分比形式指定保证金，例如margin:1%;
使用CSS3 box-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>

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

2 个答案: