สอบถามเรื่อง css กับระบบ shopping cart ครับ

[tcool]

สวัสดีครับ

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

ปัญหาเลยเกิดออกมาแบบนี้ครับ http://biggiantnetwork.com/test/product.html ไม่ทราบว่าผมจะเพิ่มเติมตรงไหนได้ครับให้มันออกมาสมบรูณ์ครับ

ดู css ได้ที่ www.biggiantnetwork.com/test/css/style.css

ขอบคุณมากครับ
เพิ่งเริ่มหัด css ปกติใช้แต่ table ครับ

[sputtaro]

ผมดูผ่านๆ ใช้เวลา ไม่ถึง 10 นาทีนะครับ อาจมองไม่ครบถ้วน และไม่ครอบคลุมทั้งหมด

ผิดตรง ในส่วน <!--สินค้า--> แต่ละส่วน 
<a href="single.html" class="item_link"> ไม่ควรครอบแบบที่คุณทำครับ

ควรแก้เป็นในลักษณะ ครอบเฉพาะ class="product-img b-link-stripe b-animate-go  thickbox" ก็พอ เช่น

<a href="single.html" class="item_link">
<div class="product-img b-link-stripe b-animate-go  thickbox">
               <img src="images/p1.jpg" class="img-responsive" alt="">
               <div class="b-wrapper">
                  <h4 class="b-animate b-from-left b-delay03">
                  <button><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>Quick View</button>
                  </h4>
               </div>
</div>
</a>

***************
 
ในส่วน <!--สินค้า-->ทั้งหมด ให้คลุมด้วย class=row
วนรอบด้วยคำสั่ง PHP ให้ 1 แถว แสดงได้แค่ 3 สินค้า(กรณีนี้ หวังว่าคุณคงทำอยู่แล้วนะครับ)
product-grid คุณแบ่งไว้ 30%  อาจทดสอบ โดยลดขนาดลงให้น้อยกว่า เผื่อแก้ปัญหาได้
เมื่อครบจำนวนที่ต้องการแสดงใน 1 หน้า เช่น 12 สินค้า
(ซึ่งก็คือ 4 แถว แถวละ 3 สินค้า)
แล้วปิด class=row
จากนั้นใน ส่วนการแบ่งหน้า
ก่อนขึ้น <!--แสดงหน้า-->
ให้เริ่ม class=row ใหม่
เมื่อแสดงการแบ่งหน้า จบด้วยการปิด
class=row
(ผมไม่ค่อยใช้ clearfix)

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

[ten1312]

เพิ่ม div class row ครอบ
ถ้า 3 col ก็ให้ปิด div หลังสินค้าที่หาร 3 ลงตัว

[snohomish]

ใช้ jquery มาช่วยจัดเรียงก็ดูดีอีกแบบนะครับ ส่วน css ส่วนมากผมจะใช้ overflow:hidden

[tcool]

สวัสดีครับ

ขอบคุณท่าน sputtaro ten1312 snohomish มากๆ นะครับมั่วจนได้แล้วครับ ฮ่าา

[MD.18]

ถ้าเป็นผมนะ ผมแก้ที่ขนาดกรอบตัวหนังสือง่ายกว่า -  -

span.item_price{color: #000;font-size: 1em;font-weight: 600;margin: 10px 0 5px;display:block;Height:90px;overflow:hidden;}

เพิ่มความสูงของกล่องข้อความตรงนั้นไปแบบฟิกเลยแล้วทำส่วนเกินให้ซ่อนไว้ แค่นี้ก็จะช่วยให้กล่องมันจัดเรียงได้เท่าๆกันครับ
หรือถ้าเอาง่ายกว่านั้นใช้ flexbox ครับ

ไม่รู้ตอบตรงคำถามไหมนะ