2012-02-19 4 views
0

これを読んでいただきありがとうございます。 私は、クエリの結果がdiv内に表示されるページを作成しています。左側に画像があり、右側に製品の説明とその特性がある典型的なdiv。だから私のPHPスクリプトは、結果の数を見つけ、forループを介して私は他の下に結果を表示しています。代わりに、各行に2つの結果(div)を表示したいと思います。 説明のdivのだから我々は<#結果#を呼び出す場合>今の結果の数、テンプレートのHTMLコードは次のようになります...divポジショニングに関する問題

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

CSSスタイルます。..

#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 } 

誰かがcssやjqueryを使って、あるいはphpを使って行うことができる誰かがいるなら、私は感謝します!!このような構造を使用して行ごとに

答えて

2

<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; 
} 
+1

はどうもありがとうございました。..フィドルに示すように、 – user926652

1

あなたがコンテナから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> 
1
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 
関連する問題