ภาพที่1ใช้โค๊ดข้างล่าง (เเนบ) มันก็สมบูรณ์ตามที่ต้องการครับ
แต่ภาพที่ 2พอเขียนหัวข้อเเบบยาวๆ (h3) มันจะดันให้ดิฟข้างล่างหายไปครับ
ไม่ทราบจะเเก้ cssงัยดีครับ รบกวนคนเก่งด้วยครับ
ขอขอบพระคุณล่วงหน้าอย่างสูงครับ
ภาพที่ 1(http://img262.imageshack.us/img262/1833/57642225.jpg)
ภาพที่2 (http://img17.imageshack.us/img17/2208/28750165.jpg)
รายละเอียดเพิ่มเติมครับ
h3 หัวข้อ
aa วันที่โพส
bb รายละเอียด
detail ภาพปุ่มดูรายละเอียด
<img src="product.jpg" /> ภาพสินค้า
html
<div class="parent">
<ul>
<li><h3>หัวข้อสั้น (ถ้าเขียนหัวข้อยาวๆ เเล้วมันจะดันให้ข้างล่างตก หายไป)</h3>
<span class="aa">post: 5/01/2001</span>
<img src="product.jpg" />
<span class="bb">รายละเอียดสินค้า ผลิตภัฒฑ์ คีย์ข้อมูลทั้งหมดอย่างสังเขป </span>
<span class="detail"><a href="#"> <img src="more.gif" /></a></span>
</li>
</ul>
<ul>
<li><h3>หัวข้อ</h3>
<span class="aa">post: 5/01/2001</span>
<img src="product.jpg" />
<span class="bb"> รายละเอียดสินค้า ผลิตภัฒฑ์ คีย์ข้อมูลทั้งหมดอย่างสังเขป </span>
<span class="detail"><a href="#"><img src="more.gif" /></a></span>
</li>
</ul>
<ul>
<li><h3>หัวข้อ </h3>
<span class="aa">post: 5/01/2001</span>
<img src="product.jpg" />
<span class="bb"> รายละเอียดสินค้า ผลิตภัฒฑ์ คีย์ข้อมูลทั้งหมดอย่างสังเขป</span>
<span class="detail"><a href="#"><img src="more.gif" /></a></span>
</li>
</ul>
<ul>
<li><h3>หัวข้อ </h3>
<span class="aa">post: 5/01/2001</span>
<img src="product.jpg" />
<span class="bb">รายละเอียดสินค้า ผลิตภัฒฑ์ คีย์ข้อมูลทั้งหมดอย่างสังเขป </span>
<span class="detail"><a href="#"><img src="more.gif" /></a></span>
</li>
</ul>
<ul>
<li><h3>หัวข้อ </h3>
<span class="aa">post: 5/01/2001</span>
<img src="product.jpg" />
<span class="bb"> รายละเอียดสินค้า ผลิตภัฒฑ์ คีย์ข้อมูลทั้งหมดอย่างสังเขป </span>
<span class="detail"><a href="#"><img src="more.gif" /></a></span>
</li>
</ul>
<ul>
<li><h3>หัวข้อ </h3>
<span class="aa">post: 5/01/2001</span>
<img src="product.jpg" />
<span class="bb">รายละเอียดสินค้า ผลิตภัฒฑ์ คีย์ข้อมูลทั้งหมดอย่างสังเขป </span>
<span class="detail"><a href="#"><img src="more.gif" /></a></span>
</li>
</ul>
</div>
css ครับ
.parent {
width: 557px;
clear: both;
padding-top: 15px;
}
.parent ul {
list-style-type: none;
width: 278px;
float: left;
}
.parent ul li {
width: 278px;
padding-bottom: 20px;
text-align: center;
position: relative;
}
.parent ul li img {
padding-right: 15px;
}
.parentt ul li h3 {
width: 238px;
}
.aa {
text-align: left;
position: relative;
width: 263px;
display: block;
padding-left: 15px;
}
.bb {
display: block;
width: 248px;
text-align: left;
}
.detail {
padding-right: 25px;
display: block;
position: relative;
}