div定位問題

並預先感謝您閱讀本文。我正在創建一個查詢結果顯示在div內的頁面。一個典型的div，左邊是圖片，右邊是產品及其特徵的描述。所以我的PHP腳本找到了結果的數量，並通過一個for循環，我將結果顯示在另一個下面。我希望在每行上顯示兩個結果（div）。所以，如果我們所說的<＃＃結果>結果數量，模板對於現在的HTML代碼看起來像這樣...div定位問題

<#FOR results#> 
    <div id="description"></div> 
    <#/FOR results#>

CSS樣式的描述DIV的是..

#description { 
    position:relative; 
    // I noticed that display:table-cells; actually puts the divs one next the other but they occupy the whole screen 
//Other properties related to font styling and etc }

如果任何人有anyidea誰可以通過使用CSS或jQuery或通過PHP來完成，我將不勝感激！

來源

2012-02-19 user926652

對於每一行使用這樣的結構：

<div class="row"> 
    <div></div> 
    <div></div> 
</div>

然後一些CSS是這樣的：

.row { 
    width:200px; // Or whatever 
    padding:0; 
    margin:0; 
    overflow:hidden; // to contain float, though I'd use .clearfix here. 
} 
.row div { 
    width:100px; // Or whatever 
    padding:0; 
    margin:0; 
    float:left; 
}

來源

2012-02-19 09:27:04

非常感謝你這工作就好了 – user926652 2012-02-19 09:48:53

您可以通過從容器設置width:50%做..這裏有一個小提琴讓你開始如何完成它.. http://jsfiddle.net/e6rzg/

設置容器的寬度爲您的規格和結果div - 將其設置爲50％（其父） ..如圖所示小提琴..

.container{ 
width:100%; 
height:auto; 
} 
.result{ 
width:50%; 
float:left; 
height:40px;/* change as needed */ 
background-color:red; 
} 


<div class="container"> 
<div class="result">1</div> 
<div class="result">2</div> 
<div class="result">3</div> 
<div class="result">4</div> 
<div class="result">5</div> 
</div>

來源

2012-02-19 09:45:32

include "storescripts/connect_to_mysql.php"; //include mysql connect script 

//create dynamic variable 
$dynamicList = ""; 

//your SQL query 
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 6"); 

// count the out put to make sure query has returned results 
$productCount = mysql_num_rows($sql); 

//if there are results loop over array and get results. then put them into divs. 
if ($productCount > 0) { 
    while($row = mysql_fetch_array($sql)){ 
        $id = $row["id"]; 
        $product_name = $row["product_name"]; 
        $price = $row["price"]; 
        $dynamicList .= '<div class="row"> 
              <div>(Add image)</div> 
              <div>(Add description variables)</div> 
             </div>'; 
} 
} else { 
//error if no results have been returned. 
    $dynamicList = "We have no products listed in our store yet"; 
} 


//then in your html 
<?php echo $dynamicList; ?> 

use the css @Rich Bradshaw posted to format

來源

2012-02-19 09:51:59 Will

回答

相關問題