PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถามวิธีแก้ปัญหารายการสินค้าในหน้าเว็บเด้ง เนื่องจากความสูงแต่แต่ละรายการไม่เท่ากันครับ

สอบถามวิธีแก้ปัญหารายการสินค้าในหน้าเว็บเด้ง เนื่องจากความสูงแต่แต่ละรายการไม่เท่ากันครับ
มีวิธีแก้ปัญหา รายการสินค้าในหน้าเว็บเด้ง เนื่องจากความสูงของแต่ละรายการไม่เท่ากันมั้ยครับ

โดย:  Fakerevol IP: 114.109.170.xxx วันที่: 11-11-2016 เวลา: 10:16:26

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
ขอบคุณคับผม 

โดย:  Fakerevol IP: 114.109.170.xxx วันที่: 11-11-2016 เวลา: 11:09:58
 ความคิดเห็นที่ 1
ลองใช้ css ช่วยจัด
 
เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table 
http://www.ninenik.com/content.php?arti_id=229 via @ninenik
 
ใช้ css แบ่งเนื้อหา เป็นคอลัมน์ พร้อมแบ่งหน้า ด้วย php 
http://www.ninenik.com/content.php?arti_id=308 via @ninenik
 
หรือถ้าเป็นพวก css framework ให้ดูระบบ grid system
อย่าง bootstrap 
https://github.com/zirafa/bootstrap-grid-only
หรือ
http://getbootstrap.com/css/


>>>  อัพเดท >>> 11-11-2016
------------------------------------------
ตัวอย่างการใช้ bootstrap grid only ดาวน์โหลดจากลิ้งค์ด้านบน แตกไฟล์แล้ว
ใช้ไฟล์ในโฟลเดอร์ css  ศึกษาการใช้งาน grid จาก bootstrap css หลัก
โค้ดตัวอย่างการใช้งานกับ 

<?php
require_once("dbconnect.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
 	<link rel="stylesheet" href="grid12.css">
	<style type="text/css">
/*	สร้าง css class สำหรับใช้ ทับ css ของ grid อีกที*/	
	.my-col{
/*		background: #FF9 ;	*/
		padding: 5px;
	}
/*	สร้าง css class สำหรับใช้ ใน div grid อีกที*/
	.product-grid{
		background: #EAEAEA;	
	}
    </style>
</head>
<body>
 

<div class="container-fluid" style="width:800px;">

<?php
$sql="
SELECT * FROM tbl_provinces  
";
$result = $mysqli->query($sql);
if($result){
	$i=0;
	$total = $result->num_rows; // จำนวนรายการทั้งหมด
	$num_col=4; // จำนวนคอลัมที่จะแบ่งแสดง
	while($row = $result->fetch_assoc()){
		$i++;
?>
	<?=($i%$num_col==1)?"<div class=\"row\">":""?>
    
<!--    เปลี่ยน col-md-3 ตามโครงสร้าง grid ที่ต้องการ -->
    <div class="col-md-3 my-col">
    
        <div class="product-grid">
        <?=$row['province_name']?>
        </div>
        
    </div>
	<?=($i%$num_col==0 || $i==$total)?"</div>":""?>

<?php 
	}
}
?>  
</div>    
 


</body>
</html>


โดย:  Ninenik IP: 180.183.46.xxx วันที่: 11-11-2016