ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programming[css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ  (อ่าน 1919 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
O.o!!
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 237
ออฟไลน์ ออฟไลน์

กระทู้: 1,432



ดูรายละเอียด
« เมื่อ: 28 ตุลาคม 2010, 23:58:09 »

คือมีปัญหากับการใช้ float นิดหน่อยครับ ตัวโค๊ดมีดังนี้

style{
#main{
  border: 1px solid gray;
  padding:10px;
}
#image{
float:left;
margin:10px;
}
}

<div id="main">

  <div id="image"></div>
  <div id="image"></div>
  <div id="image"></div>
  
</div>

แต่ที่ผมอยากได้คือแบบนี้ครับ


คือทราบอยู่ว่าท่าใช้ height ใน main มันจะทำได้ แต่มันจะมีปัญหาถ้ารูปมันเยอะกว่า 1 แถวอ่ะครับ  
อยากให้มันยืดหยุ่น เพิ่มไปตามจำนวนแถว ของ image ครับ

ขอบคุณครับ
« แก้ไขครั้งสุดท้าย: 28 ตุลาคม 2010, 23:59:18 โดย cjmling » บันทึกการเข้า
g-ji
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 231
ออฟไลน์ ออฟไลน์

กระทู้: 3,254



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 29 ตุลาคม 2010, 00:12:58 »

style{
#main{
  border: 1px solid gray;
  padding:10px;
}
#image{
float:left;
margin:10px;
}
}

.clear {/*เพิ่มเข้าไป*/
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}

<div id="main">

  <div id="image"></div>
  <div id="image"></div>
  <div id="image"></div>
  <br class="clear" /> <!--เพิ่มตรงนี้ ก่อนปิด div-->
</div>

***
<img> เป็น inline element อยู่แล้ว ถ้าเราเอามันใส่ไว้ใน text element เช่น <p> (paragraph tag) รูปทั้งหมดจะแสดงผลเป็น inline (แถวเดียวกันทั้งหมด จนกว่ามันจะเจอ <br /> มันจะขึ้นบรรทัดใหม่) โดยไม่ต้องจับมัน float และเมื่อมันอยู่ใน <p> เราสามารถจัดตำแหน่ง <img> ได้ด้วยคำสั่ง text-align: left/center/right;
« แก้ไขครั้งสุดท้าย: 29 ตุลาคม 2010, 00:22:18 โดย g-ji » บันทึกการเข้า

aum_mix
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 1,153



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 29 ตุลาคม 2010, 00:13:53 »

<ul>
<li></li>
</ul>

 Cry
บันทึกการเข้า

ขายที่ดิน 31 ไร่ อยู่ ที่ดินสวย ทำเลดีติดถนน เหมาะแก่การลงทุนเป็นอย่างยิ่ง ที่ดินทำเลดี และที่ดิน 2,000 ไร่ จังหวัดกาญจนบุรี ที่ดินราคาดี
O.o!!
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 237
ออฟไลน์ ออฟไลน์

กระทู้: 1,432



ดูรายละเอียด
« ตอบ #3 เมื่อ: 29 ตุลาคม 2010, 00:19:45 »

ขอบคุณ g-ji มากครับ  +1 ไปครับ

อ้างถึง
<img> เป็น inline element อยู่แล้ว ถ้าเราเอามันใส่ไว้ใน text element เช่น <p> (paragraph tag) รูปทั้งหมดจะแสดงผลเป็น inline (แถวเดียวกันทั้งหมด จนกว่ามันจะเจอ <br /> มันจะขึ้นบรรทัดใหม่) โดยไม่ต้องจับมัน float

อ้อ <img> ผมด้วยความจำเป็นบางอย่าง มันอยู่ใน <div id="image"> อีกทีอ่ะครับ เลยต้อง float div ครับ  *ไม่ได้ float img   Tongue แหะๆ ผมตั้ง id เป็น image เลยทำให้งง

พอดี บังเอิญ เจอวิธี เขียนโค๊ดน้อย น้อยกว่า ของท่าน นิดหน่อยครับ

แค่เพิ่ม  overflow: hidden; ใน main เข้าไป

style{
#main{
  border: 1px solid gray;
  padding:10px;
  overflow: hidden;
}
#image{
float:left;
margin:10px;
}
}

<div id="main">

  <div id="image"></div>
  <div id="image"></div>
  <div id="image"></div>
  
</div>

« แก้ไขครั้งสุดท้าย: 29 ตุลาคม 2010, 00:24:03 โดย cjmling » บันทึกการเข้า
g-ji
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 231
ออฟไลน์ ออฟไลน์

กระทู้: 3,254



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 29 ตุลาคม 2010, 00:29:05 »

overflow:hidden; มันเป็นการซ่อนส่วนที่เกินจากกรอบไม่ให้แสดงผลอะ มันดูเหมือนกันก็จริง แต่ลองเอา <div> ไปต่อจากตัว image อีกสักแถวสิ  ไอ้ตัวหลังสุดเนี่ยมันจะลอย ไปอยู่ข้างๆ รูป หรือ <div> ตัวล่าสุด มันจะไปเบียดแย่งที่ รูป  Tongue แต่ถ้าไม่มี <div> ต่อจาก image อีกก็ปล่อยไปเถอะ

เรื่องของ float ที่มันเบียดแย่งที่กัน

มันจะเป็นไปตามตัวอย่างนี้ ที่คุณ พร อันทะ เขียนไว้
โค๊ด:
http://thaicss.com/lessons/clear1.html

บทความเต็มๆ อ่านที่นี่เลย ละเอียดยิบ
โค๊ด:
http://thaicss.com/clear-fix-ทำไม-และ-ทำไมต้อง-clearfix/

 Embarrassed

ปล. อ้าว คุณพร อันทะ เปลี่ยนระบบเว็บมาเป็น WP แล้ว  Shocked
« แก้ไขครั้งสุดท้าย: 29 ตุลาคม 2010, 00:42:29 โดย g-ji » บันทึกการเข้า

O.o!!
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 237
ออฟไลน์ ออฟไลน์

กระทู้: 1,432



ดูรายละเอียด
« ตอบ #5 เมื่อ: 29 ตุลาคม 2010, 01:31:13 »


โห พี่เขาเทพจริงๆครับ ดู css เขาไม่รู้เรื่องเลย  Sad

เห็นว่ามันคือ advanced css ใช่ไหมนั่น  Tongue
บันทึกการเข้า
g-ji
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 231
ออฟไลน์ ออฟไลน์

กระทู้: 3,254



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 29 ตุลาคม 2010, 01:56:20 »


โห พี่เขาเทพจริงๆครับ ดู css เขาไม่รู้เรื่องเลย  Sad

เห็นว่ามันคือ advanced css ใช่ไหมนั่น  Tongue

อ่า มันเป็น css 3.0 ไปแล้ว... ที่เราๆ เขียนกันอยู่ทุกวันนี้ กำหนด ID กำหนด Class มันยังแค่ 1.0~2.0 อยู่เลย (แถมยังใช้ความสามารถของมันได้ไม่ถึง 50% ด้วยซ้ำ) คนละยุคแล้ว... หรือพูดง่ายๆ อีกอย่างว่า คุณพร อันทะ เขาก้าวทันยุคแล้ว (ยุคของ html5 + css3.0) แต่เรายังไม่ขยับไปไหน แต่ที่มันเป็นแบบนี้ก็เพราะ IE6 แหละผิด  wanwan010
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์