ช่วยเรื่อง css หน่อยครับ <ul> แบบนำภาพมาเรียง div ต่อไปมันซ้อนกันหนะครับ

[okgofun]

ช่วยเรื่อง css หน่อยครับ <ul> แบบนำภาพมาเรียง div ต่อไปมันซ้อนกันหนะครับ

สมมุติว่า
<div id="listpic">
<ul>
  <li><img src="..."></li>
  <li><img src="..."></li>
  <li><img src="..."></li>
  <li><img src="..."></li>
........ มีอีกหลายๆ </li> ที่เป็นภาพ
</ul>
</div>

//float กำหนดเป็นแบบ left นะครับ ภาพจะได้เรียงไปเรื่อยๆ ถ้าถึงขนาดความกว้างที่กำหนดไว้ ระบบมันก็จะขึ้นบรรทัดใหม่

แต่ปัญหาที่ผมเจอคือ tag ต่อๆไป ซึ่งอาจจะเป็นเนื้อหา เช่นกำหนด <div id="content">...</div>

ไอ้เจ้าภาพที่เราทำไว้ใน list มันจะมาซ้อนทับกันทุกทีเลยครับ ลองทุกๆรูปแบบไม่ว่าจะกำหนด padding-bottom หรืออื่นๆ มันก็ไม่ได้หนะครับ

มีวิธีเดียวที่ผมลองได้คือ กำหนดความสูงของ div นั้นๆ ซะ เช่น #listpic { height:500px; } แบบนี้ถึงจะได้ผล

แต่... ปัญหาคือ บางทีขนาดภาพมีความกว้างสูงต่างกัน และจำนวนภาพต่างกันในแต่ละครั้ง เราจะไป fix ได้ยังไงหละครับ ว่าจะให้ box นั้นๆสูงเท่าไหร่

ไม่ทราบว่าผมควรจะต้องทำยังไงครับ ขอคำแนะนำด้วยครับ 

[ab5olute]

ใน div ถัดไปให้ลองใช้ float : clear ดู

[artofid]

พอจบ tag ของ ul ให้ใส่

<div style="clear:both;"></div>

เรียบโร้ย

[okgofun]

ขอบคุณมากๆครับ