css...ถามปัญหา..ulli มีภาพประกอบชัดเจน ไม่งง ครับ

นิติพงษ์ · 21 มกราคม 2011, 08:40:48

ภาพที่1
ใช้โค๊ดข้างล่าง (เเนบ) มันก็สมบูรณ์ตามที่ต้องการครับ

แต่ภาพที่ 2
พอเขียนหัวข้อเเบบยาวๆ (h3) มันจะดันให้ดิฟข้างล่างหายไปครับ

ไม่ทราบจะเเก้ cssงัยดีครับ รบกวนคนเก่งด้วยครับ
ขอขอบพระคุณล่วงหน้าอย่างสูงครับ

ภาพที่ 1

ภาพที่2

อ้างถึงรายละเอียดเพิ่มเติมครับ
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;
}

20auguzt · 21 มกราคม 2011, 09:03:06

ใช้คำสั่ง clear:both เอาฮะ

โค้ด เลือก


<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 style="clear:both">
           <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 style="clear:both">
           <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>

นิติพงษ์ · 21 มกราคม 2011, 10:13:58

อ้างถึงจาก: 20auguzt ใน 21 มกราคม 2011, 09:03:06
ใช้คำสั่ง clear:both เอาฮะ

โค้ด เลือก ขยาย
<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 style="clear:both"> <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 style="clear:both"> <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>

ขอบคุณมากครับ
ท่านเก่งมากเลย
ขอคาระวะ 1จอก

นิติพงษ์ · 21 มกราคม 2011, 10:18:22

ไม่ทราบว่า
ถ้าเรายังไม่รู้ว่า
ข้อหัว อันไหน มันจะต้องเขียนยาวหรือสั้น
จะต้องทํางัยครับ

css...ถามปัญหา..ulli มีภาพประกอบชัดเจน ไม่งง ครับ

นิติพงษ์

20auguzt

นิติพงษ์

นิติพงษ์