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

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

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingมีปัญหาเรื่อง DIV ตัวแรกกับตัวสุดท้ายครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: มีปัญหาเรื่อง DIV ตัวแรกกับตัวสุดท้ายครับ  (อ่าน 2123 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
peith
คนรักเสียว
*

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

กระทู้: 134



ดูรายละเอียด
« เมื่อ: 07 มิถุนายน 2012, 16:52:52 »

สมมุติว่าผมสร้าง div ขึ้นมา 4 ตัวเรียงกัน และต้องการให้มี margin-right: 5px แต่ละ div
จะทำยังไงให้ไม่มี margin-right ในตัว div สุดท้ายครับ  Lips Sealed
บันทึกการเข้า
npdesign
สมุนแก๊งเสียว
*

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

กระทู้: 673



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 07 มิถุนายน 2012, 16:54:15 »

อาจจะใช้ Inline หรือไม่ก็สร้าง class ให้กับตัวสุดท้าย ใส่เป้น margin: 0; ก็ได้ครับ  wanwan017
บันทึกการเข้า

Finch
คนรักเสียว
*

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

กระทู้: 118



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 07 มิถุนายน 2012, 17:13:44 »

ห่วงเรื่องบราวเซอร์มั๊ยครับ ถ้าไม่สนบราวเซอร์รุ่นเก่า ก็ใช้

div:last-child ได้ครับ

เวลาเขียนก็

โค๊ด:
div{
margin-right:5px;
}
div:last-child{
margin-right:0px
}

แต่ถ้ายังกลัวเรื่องบราวเซอร์ที่ไม่สนับสนุน CSS3 ก็ลองใช้วิธีเปลี่ยนฝั่งของ margin นะครับ
จริงๆแล้ว การกำหนด margin-right:5px ให้ div 3 ตัวยกเว้นตัวสุดท้าย
มันก็แสดงผลเหมือนกับการกำหนด margin-left:5px ให้ div 3 ตัวยกเว้นตัวแรก จริงมั๊ยครับ

โค๊ด:
div{
margin-left:5px;
}
div:first-child{
margin-left:0px;
}
บันทึกการเข้า
thanagrid
สมุนแก๊งเสียว
*

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

กระทู้: 675



ดูรายละเอียด
« ตอบ #3 เมื่อ: 07 มิถุนายน 2012, 17:16:54 »

สร้าง class ครับง่ายสุด
บันทึกการเข้า

siammbk
ก๊วนเสียว
*

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

กระทู้: 236



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 08 มิถุนายน 2012, 03:37:34 »

สมมุติว่าผมสร้าง div ขึ้นมา 4 ตัวเรียงกัน และต้องการให้มี margin-right: 5px แต่ละ div
จะทำยังไงให้ไม่มี margin-right ในตัว div สุดท้ายครับ  Lips Sealed

เรียงแบบนี้ป่าว
<style>
  .xxx{margin-right:5px;}
</style>
<div>1</div><div>2</div><div>3</div><div class="xxx">4</div>

หรืออีกแบบ
<style>
div div div div{margin-right:5px;}
</style>
<div>
    <div>
        <div>
           <div></div>
        </div>
    </div>
</div>

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

รับออกแบบเว็บไซต์ ทุกรูปแบบ งานใหญ่ๆ ระบบยากๆ ราคาแรงๆ คุยกันคับ
line : siammbk
tel : 095-675-8614
pinsale
สมุนแก๊งเสียว
*

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

กระทู้: 743



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 08 มิถุนายน 2012, 08:13:35 »

ใช่ค่ะ ใช้ class ง่ายสุด ๆ

 wanwan017
บันทึกการเข้า
makoto
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,443



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 08 มิถุนายน 2012, 10:38:07 »

ผมใช้ class ทุกตัวยกเว้นตัวสุดท้ายใช้ id แทน wanwan020
บันทึกการเข้า

ghostbehead
สมุนแก๊งเสียว
*

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

กระทู้: 614



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 08 มิถุนายน 2012, 11:27:28 »

ถ้าใช้ last-child ระวัง IE ด้วยนะครับ
รู้สึกว่า IE จะสามารถใช้ได้แค่ first-child ครับผม

ผมแนะนำแบบนี้ครับ

โค๊ด:
<style>
.item:first-child { margin-left: 0; }
.item { margin-left: 5px; }
</style
<div class="content">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

จริงๆ มีหลายวิธีนะครับ ลองปรับไปเรื่อยๆ ครับ
บันทึกการเข้า

peith
คนรักเสียว
*

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

กระทู้: 134



ดูรายละเอียด
« ตอบ #8 เมื่อ: 09 มิถุนายน 2012, 01:11:24 »

ขอบคุณสำหรับทุกคำตอบครับ  wanwan017

เหตุผลที่ไม่สร้าง class ใน div สุดท้ายเพราะใช้ function ให้สร้าง div ต่อกันไปเรื่อยๆตามบทความที่โพสลงอ่าครับ แบบว่าพอ div ต่อกันครบ 4 div ก็ขึ้นบรรทัดใหม่ ผมเลยไม่รู้จะกำหนด class สุดท้ายของบรรทัดนั้นได้ยังไง
บันทึกการเข้า
ghostbehead
สมุนแก๊งเสียว
*

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

กระทู้: 614



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 09 มิถุนายน 2012, 01:13:30 »

ให้ script นับจำนวนที่สร้าง ไงครับ พอตรงตามต้องการก็ให้ใส่อีก class

class นั้นก็เป็น margin-left: 0; ไป

แต่จริงๆ แบบนี้เค้าก็ปล่อยไปนะครับ คือให้มันถีบเองไปเรื่อยๆ กำหนด ซ้ายขวา เท่าๆ กันก็ ok นะครับ Cheesy
« แก้ไขครั้งสุดท้าย: 09 มิถุนายน 2012, 01:14:49 โดย ghostbehead » บันทึกการเข้า

jojoluzifer
ก๊วนเสียว
*

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

กระทู้: 456



ดูรายละเอียด
« ตอบ #10 เมื่อ: 09 มิถุนายน 2012, 11:03:41 »

ถ้าเรียงกัน 4 อันเลยจะยากน่ะครับ

ใช้ div ครอบ 4 อัน ดูครับ

<div id="test">
   <div>*4

</div>

#test:last-child{

}
บันทึกการเข้า
ossytong
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,149



ดูรายละเอียด
« ตอบ #11 เมื่อ: 09 มิถุนายน 2012, 11:32:53 »

ใช้

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

จะเหมาะกว่าครับ

จากนั้นจัด css li เป็น flloat: left; จากนั้นก้จัด css ได้เลยครับ


บันทึกการเข้า
homely
Newbie
*

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

กระทู้: 9



ดูรายละเอียด
« ตอบ #12 เมื่อ: 13 มิถุนายน 2012, 11:45:32 »

ปกติ เขาจะใช้วิธี margin-right:5px ไปทุกๆ div เลยนะครับ แต่มีการกำหนด กรอบนอกแทน เพื่อให้ครบ4แล้วจะถีบลงบรรทัดถัดๆไป

        <div style="width:420px;border:1px solid black;padding-left:5px;margin:0 auto;">
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: red;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: yellow;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: red;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: yellow;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: red;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: yellow;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: red;"></div>
            <div style="float:left;margin-right:5px;width:100px;height: 100px;margin-bottom: 5px;background: yellow;"></div>
            <br style="clear:both;"/>
        </div>

ประมาณนี้อะครับ ลบ inline style ออกไปไเป็นคลาสแทนครับ ลองปรับๆดู wanwan016

« แก้ไขครั้งสุดท้าย: 13 มิถุนายน 2012, 13:15:44 โดย homely » บันทึกการเข้า
ultrasad
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,166



ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 13 มิถุนายน 2012, 12:36:06 »

ขอบคุณสำหรับทุกคำตอบครับ  wanwan017

เหตุผลที่ไม่สร้าง class ใน div สุดท้ายเพราะใช้ function ให้สร้าง div ต่อกันไปเรื่อยๆตามบทความที่โพสลงอ่าครับ แบบว่าพอ div ต่อกันครบ 4 div ก็ขึ้นบรรทัดใหม่ ผมเลยไม่รู้จะกำหนด class สุดท้ายของบรรทัดนั้นได้ยังไง

ก็เงื่อนไขเิดียวกันกับ เวลาที่กำหนดให้ div ขึ้นบรรทัดใหม่ เมื่อครบ 4 div แหละครับ
ครบ 4 div ก็ใส่ class งงป่าวหว่า  Tongue
บันทึกการเข้า

ThaiseoBoard | รวมรักใดในภิภพจบโลกา แม้นเลิศหล้า ก็ไม่ถึงกึ่งมารดร | I am Redshirted

ทฤษฎีทาง SEO อาจต้องทำตัว Bold หรือ Underline แต่คำว่า "รัก" ไม่ต้องก็ได้ เพราะเธอคงรู้ว่ามันมีความหมาย และ สำคัญ.

ดาวน์โหลดโปรแกรมฟรี ทำเว็บให้คนใช้ ไม่ได้ทำไว้ให้บอทอ่าน Smiley
hajobdee
ก๊วนเสียว
*

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

กระทู้: 360



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 13 มิถุนายน 2012, 12:56:56 »



 Tongue
« แก้ไขครั้งสุดท้าย: 13 มิถุนายน 2012, 12:58:26 โดย hajobdee » บันทึกการเข้า

Shin69
ก๊วนเสียว
*

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

กระทู้: 286



ดูรายละเอียด
« ตอบ #15 เมื่อ: 13 มิถุนายน 2012, 13:30:56 »

ผมมักจะใช้วิธี เขียน if else ครอบ loop ที่สร้าง div นะครับ นับจำนวนรอบที่โพสเอาไว้ ถ้า หารด้วย 4 ลงตัว ให้เติม class (สมมุติชื่อ last) ลงไป

// ใน loop ที่เราใช้ gen div ออกมาใช่ป่าว ผมจะ สมมุติตัวนับรอบชื่อ $div นะครับ วนครบรอบก็ +1 ไปเรื่อยๆ

<div class="box<?php if(($div %4) == 0) { echo ' last'; } ?>">

งงไหมหว่า  Embarrassed
บันทึกการเข้า

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