Question

并提前感谢阅读本文。我正在创建一个页面，其中查询的结果显示在div中。典型的div，左边是图像，右边是产品描述及其特征。所以我的php脚本找到了结果的数量，并通过for循环我将结果显示在另一个之下。我希望在每一行显示两个结果（div）。因此，如果我们调用＆lt;＃results＃＆gt;结果的数量，模板的html代码现在看起来像这样......

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

描述div的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完成的任何人，我将不胜感激！

Answer 1

对于每一行，使用如下结构：

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

Answer 2

你可以通过从容器中设置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>

Answer 3

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

div定位问题

3 个答案: