想要在用PHP獲取的MYSQL數據的同一行中顯示x3 DIV

Question

我的PHP從MySQL抓取數據並將其顯示在index.php的容器div中，沒有問題。 但是，數據會依次顯示（不同的行），而不是使用同一行中的可用空間。

這是div的index.php代碼段，用作body標簽中的整體容器。 第二個div用於無限滾動功能，當用戶到達屏幕末端時將加載更多數據。

<div id="postedComments">

<?php require_once 'jquery-masterLoader.php' ;  ?>

</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field            </center>
</div>

這是PHP jquery-masterLoader.php，它是控制加載腳本的兩個PHP文件之一。 另一個不需要顯示和告訴，因為僅當用戶到達屏幕末端時才調用它。

<?php
if ( strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__))) ) {
header("Location: index.php");
die("Denny access");
}
    error_reporting(0) ;
    set_exception_handler('exception_handler') ;
    $config = parse_ini_file("core/config/my.ini") ;
    $db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] ,                 
    $config['dbName']);
    if(mysqli_connect_error()) {
     throw new Exception("<b>Could not connect to database</b>") ;
    }
    if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT          
    0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
    }

    while ($data = $result->fetch_object()) {
    $id = $data->id;
    $name = $data->Name ;
    $continent = $data->Continent;
    $population = $data->Population ;
    echo "
    <div class='postedComment' style=\"width: 33%; \ list-style: ; \ float: left;\" id=\"$data-                 
    >id \">

    <b>Country : </b>$name <br /> 
    <b>Continent : </b>$continent<br/>
    <b>Population : </b>$population 
    <i style=\"font-size:small;color:blue\">Index : $id</i>
    <hr /> 

    </div> 
    " ;

    } 
    /* close connection */
    $db->close();
    function exception_handler($exception) {
      echo "Exception cached : " , $exception->getMessage(), "";
    }

很抱歉將樣式與PHP融合在一起，這項工作正在進行中。

這是CSS規則

#postedComments {
width: 100%;
display: ;

}

html, body { 
height: ; 
width: 100%; 
margin: 0; 
padding: 0;
}

#body {
width: 60%; 
margin: 1% auto;
}

 /* Resets */

ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}

h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}

p {
padding:0;
margin:0 0 20px 0;
}

a:link, a:visited {
text-decoration:underline;
color:#000;
}

a:hover {
text-decoration:none;
}

ul li {
padding:5px 0;
}

ul li input[type="text"], ul li input[type="password"] {
width:200px;
}

這也是調用腳本的JavaScript。
（custom_jquery-debug.js）

 $(document).ready(function() { 
 $("#postedComments").append( "<p id='last'></p>" );
 //$("#postedComments").append( "<div id='last'></div>" );
console.log("Document Ready ------------------------");
if ($("#last").length){ 
position = $("#last").offset() ; 
console.log("Initialization of last_DIV succeeded and it's values are ....Top-value           
is :"+Math.floor(position.top) + " ---- Left-value is : "+ Math.floor(position.left ))      
;   

}
doMouseWheel = 1 ;   
$(window).scroll(function() {
if (!doMouseWheel)  {
return ;
} ;
 var distanceTop = $('#last').offset().top - $(window).height();
     console.log("Mouse scroll , and The DIV  last has an offset-top value of :"+      
Math.floor($("#last").offset().top)+"----Window height is     
:"+Math.floor($(window).height())+"---- Last's offset minus window height is :     
"+Math.floor(distanceTop)) ;  
if  ($(window).scrollTop() > distanceTop){
console.log("End of Window Reached >>>>>>>>>>>>>>>>>>>>>>>>>>") ;
console.log("Show Div loadMoreComments and Class .postedComments.last has the id of  :     
"+$(".postedComment:last").attr('id')); 
 doMouseWheel = 0 ; 
$('div#loadMoreComments').show();
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+     
$(".postedComment:last").attr('id') ,   
success: function(html) {
 doMouseWheel = 1 ; 
if(html){
$("#postedComments").append(html);
console.log("Append html , sumarize .... first id has nr : "     
+$(".postedComment:first").attr('id')+ " --- last id has nr :"     
+$(".postedComment:last").attr('id'));
position = $("#last").offset() ; 
console.log("New values of last_DIV  from IF_html are , Top 
:"+Math.floor(position.top )+" --- left :"+Math.floor(position.left)) ; 
$("#last").remove();
if ($("#last").length == 0 ){ console.log(">>>>>>>>>>>>>>>The last_DIV is removed     
from stage>>>>>>>>>>") ; }
$("#postedComments").append( "<p id='last'></p>" );
if ($("#last").length  ){ 
position = $("#last").offset() ; 
console.log(">>>>>>>>>>>>>>>A new last_DIV is appended and it's values are , Top :" 
+ Math.floor(position.top) +"  ---- Left :" + Math.floor(position.left )) ; 
}   
$('div#loadMoreComments').hide();
}else{  
console.log("LoadMoreComments is replaced with a custom message") ; 
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of    
countries !!!!!!!</h1></center>");
}
}
});
}
});
});

第二個JS腳本（custom_jquery.js）

 $(document).ready(function() { 
  $("#postedComments").append( "<p id='last'></p>" );
 //console.log("Document Ready");
doMouseWheel = 1 ;   
 $(window).scroll(function() {
 //console.log("Window Scroll ----");

 if (!doMouseWheel)  {
 return ;
 } ;
  var distanceTop = $('#last').offset().top - $(window).height();   
if  ($(window).scrollTop() > distanceTop){
 //console.log("Window distanceTop to scrollTop Start");
  doMouseWheel = 0 ; 
$('div#loadMoreComments').show();
    //console.log("Another window to the end !!!!       
 "+$(".postedComment:last").attr('id'));    
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+ 
 $(".postedComment:last").attr('id') ,  
success: function(html) {
 doMouseWheel = 1 ; 
if(html){
$("#postedComments").append(html);
//console.log("Append html--------- " +$(".postedComment:first").attr('id'));
//console.log("Append html--------- " +$(".postedComment:last").attr('id'));
$("#last").remove();
$("#postedComments").append( "<p id='last'></p>" );
$('div#loadMoreComments').hide();
}else{      
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of      
 countries !!!!!!!</h1></center>");
 // Added on Ver.0.4  
 //Disable Ajax when result from PHP-script is empty (no more DB-results )
 doMouseWheel = 0 ; 
}
}
});
}
});
});

Answer 1

好，問題解決了。 我將樣式與行為（CSS與PHP）分開，然后將float浮動：left; 踢起來並保存了一天。

我通常永遠不會混用內容/樣式/行為，但是，從Github獲得代碼后，我很懶惰，並保持原樣。 結果，未識別出float屬性。

我對CSS進行了此調整，問題得以解決。 DIV占據了占容器60％屏幕的100％可用容器中的33％寬度。

        #postedComments {
            width: 100%;
            display: block;
            }

        .postedComment {
            width: 33%; 
            float: left;
            }

對於那些發表評論的人，br標簽最終將被刪除，但是，它們沒有引起問題。 他們只是在div中分離了數據。

#postedComments和s也僅影響主DIV。

謝謝您的寶貴時間。 現在該解決其他問題了... :)