Question

我的问题是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-->

谢谢，理查德

Answer 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;
}

（我不确定所需的真实高度。这与您在那里的代码一起工作，但我没有加载图像，所以玩它）

Answer 2

为UL添加高度

在萤火虫设置中

`height: 1013px;`

为我工作

希望这会有所帮助

将列表转换为列

2 个答案: