ต่อไป »

[peith]

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

[npdesign]

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

[Finch]

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

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]

สร้าง class ครับง่ายสุด

[siammbk]

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

เรียงแบบนี้ป่าว
<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>

 

[pinsale]

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

 

[makoto]

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

[ghostbehead]

ถ้าใช้ 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]

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

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

[ghostbehead]

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

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

แต่จริงๆ แบบนี้เค้าก็ปล่อยไปนะครับ คือให้มันถีบเองไปเรื่อยๆ กำหนด ซ้ายขวา เท่าๆ กันก็ ok นะครับ

[jojoluzifer]

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

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

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

</div>

#test:last-child{

}

[ossytong]

ใช้

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

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

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

[homely]

ปกติ เขาจะใช้วิธี 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 ออกไปไเป็นคลาสแทนครับ ลองปรับๆดู

[ultrasad]

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

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

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

[hajobdee]

 

[Shin69]

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

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

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

งงไหมหว่า