ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: O.o!! ที่ 28 ตุลาคม 2010, 23:58:09



หัวข้อ: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: O.o!! ที่ 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>

แต่ที่ผมอยากได้คือแบบนี้ครับ
(http://img829.imageshack.us/img829/6954/76614398.jpg) (http://img829.imageshack.us/i/76614398.jpg/)

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

ขอบคุณครับ


หัวข้อ: Re: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: g-ji ที่ 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;


หัวข้อ: Re: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: aum_mix ที่ 29 ตุลาคม 2010, 00:13:53
<ul>
<li></li>
</ul>

 :'(


หัวข้อ: Re: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: O.o!! ที่ 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   :P แหะๆ ผมตั้ง 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>



หัวข้อ: Re: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: g-ji ที่ 29 ตุลาคม 2010, 00:29:05
overflow:hidden; มันเป็นการซ่อนส่วนที่เกินจากกรอบไม่ให้แสดงผลอะ มันดูเหมือนกันก็จริง แต่ลองเอา <div> ไปต่อจากตัว image อีกสักแถวสิ  ไอ้ตัวหลังสุดเนี่ยมันจะลอย ไปอยู่ข้างๆ รูป หรือ <div> ตัวล่าสุด มันจะไปเบียดแย่งที่ รูป  :P แต่ถ้าไม่มี <div> ต่อจาก image อีกก็ปล่อยไปเถอะ

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

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

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

 :-[

ปล. อ้าว คุณพร อันทะ เปลี่ยนระบบเว็บมาเป็น WP แล้ว  :o


หัวข้อ: Re: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: O.o!! ที่ 29 ตุลาคม 2010, 01:31:13

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

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


หัวข้อ: Re: [css] ปัญหากับการใช้ float นิดหน่อยครับ ช่วยทีครับ
เริ่มหัวข้อโดย: g-ji ที่ 29 ตุลาคม 2010, 01:56:20

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

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

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