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

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

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

Fakerevol 11-11-2016 10:16:26

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองใช้ css ช่วยจัด

เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table

https://www.ninenik.com/content.php?arti_id=229 via @ninenik

ใช้ css แบ่งเนื้อหา เป็นคอลัมน์ พร้อมแบ่งหน้า ด้วย php

https://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 11-11-2016

ความคิดเห็นที่ 2

ขอบคุณคับผม

fakerevol 11-11-2016 11:09

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน