หัวข้อ: [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: |