把列表變成列

我的問題是，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-->

感謝，理查德

來源

2012-05-16 Richard

添加高度UL

在Firebug設置

`height: 1013px;`

工作對我來說

希望這有助於

來源

2012-05-16 04:44:11 Junaid

是的，它的工作表示感謝。我想我需要一個更強大的解決方案，如960網格。如果我對產品包裝箱使用不同的高度，這種佈局可以輕鬆地打破。 – Richard

也感謝提及測試的螢火蟲。我現在在Chrome中，所以我將切換到Firefox。 – Richard

是的高度需要在動態網站適當的關注 btw高興它爲你工作:) – Junaid

我想你可以只設置在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-16 04:36:18 MikeCruz13

把列表變成列

回答

相關問題