0

我的问题是 css 打破了一个列表项，成为下一个看起来很难看的列的一部分。

我该如何解决这个问题

这是css和循环

.cbt{clear:both;}

container-main{ width:960px;}

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

li{border:solid 1px #555;}


.item-vol{ height:250px;}



<div id="container-main" style="background-color:#F6F6F6;">


  <?php
echo '<div><br>winkelwagen_id is: <span style="color:red;"><b>'.$winkelwagen_id.'</b></span></div><br>';
//select all the items into the database and show them to screen

$q = "SELECT item_id, naam, prijs, img FROM shbel_items";
$q2 = "SELECT item_id,aantal FROM shbel_winkelwagen_items where winkelwagen_id = $winkelwagen_id";
//extracting every single item
$records = $crud->rawSelect($q);
        $items = $records->fetchAll(PDO::FETCH_ASSOC);


echo"<UL>";
for($i=0, $cnt = 5; $i<$cnt; $i++){


foreach($items as $item)

    {

        if( $winkelwagen->productBestaat($item['item_id'] )){
            //voeg verwijder/toevoegen knop toe aan html afhankelijk van een match

        }

    ?>
     <LI>    
    <div class="item-vol"><form action="/" method="post" id="">
    <div><img height="100" width="100" src="<?php echo("/images/".$item['img']); ?>" /></div>
    <div>Item naam: <?php echo($item["naam"]); ?></div>
    <div>Omschrijving <?php echo($item["omschrijving"]); ?></div>
    <div><input type="checkbox" name="toevoegen[]" value="<?php echo($item['item_id']); ?>"/>
    <span><input name="aantal" type="text" size="10" value=""></span></div>
    <div><input id="" type="submit" value="toevoegen" name="action"/></div> 
            <input name="item_id" type="hidden" value="hidden">
    </form>
    </div>
    </LI>
    <?php

    }
}// EINDE FOR LOOP
?>

  </ul>
  </div><!--    EINDE CONTAINER-MAIN-->

谢谢，理查德

4

2 回答 2

1

我认为您可以在 CSS 容器（即 UL）中设置一个高度。

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
    height: 760px;
}

（我不确定所需的实际高度。这与您那里的代码一起使用，但我没有加载图像，所以请尝试一下）

于 2012-05-16T04:36:18.633 回答
1

将高度添加到 UL

在萤火虫设置

`height: 1013px;`

为我工作

希望这可以帮助

于 2012-05-16T04:44:11.967 回答