การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

by Parichat » 28/06/2018 5:33 pm

การใช้งาน Margins ช่วยจัดรูปภาพหรือข้อความที่มี <div> คลอบอยู่

ในกรณีที่เราต้องการที่จะจัดรูปหรือข้อความที่อยู่มีแท็ก <div> คลอบอยู่นั้นเราไม่สามารถที่จะใช้คำว่า center ให้มันอยู่กึ่งกลางได้แต่ใน css ช่วยให้เราสามารถที่จะจัดรูปหรือข้อความที่มีแท็ก <div> คลอบอยู่ได้โดยใช้คำสั่ง margins ในการจัดได้

ตัวอย่างต้องการที่จะจัดรูปภาพให้อยู่ห่างจากขอบจอ 100px และด้านบนรูปห่างจากขอบ 100px เช่นเดียวกัน
รูปภาพตัวอย่างที่ต้องการจัด
p3.jpg
p3.jpg (37.2 KiB) Viewed 626 times
โค้ด

Code: Select all

<html>
        <head>
                <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
                <div class="container-fluid">
                        <div class="row">
                                        <div class="col-lg-12">
                                                <img src="img/animalia-3208412_960_720.jpg" alt="" width="500" />
                                        </div>
                        </div>
                </div>
        </body>
</html>
ขั้นตอนการจัดรูปภาพ
  • 1.เข้าไปในไฟล์ css แล้วสร้าง class มา 1 คลาส ดังโค้ด

    Code: Select all

    .margintest{
    	......คำสั่ง css......
    }
    
    2.จากนั้นเพิ่มคำสั่งไปใน Class นั้น

    Code: Select all

    .margintest{
    	margin-left: 100px;
    	margin-top: 100px;
    }
    
    คำอธิบายโค้ด
    • margin-left คือการจัดให้ข้อมูลที่อยู่ในแท็ก <div> ที่อยู่ซ้ายมือห่างจากจอ 100px
      margin-top คือการจัดให้ด้านบนห่างจากจอ 100px
    3.จากนั้นนำชื่อ class ไปใส่ใน class ของแท็ก <div> ดังโค้ด

    Code: Select all

    <html>
            <head>
                    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
            </head>
            <body>
                    <div class="container-fluid">
                            <div class="row margintest">
                                            <div class="col-lg-12">
                                                    <img src="img/animalia-3208412_960_720.jpg" alt="" width="500" />
                                            </div>
                            </div>
                    </div>
            </body>
    </html>
    4.ผลลัพธ์ที่ได้ดังรูป
    p4.jpeg
    p4.jpeg (14.33 KiB) Viewed 626 times
นอกจากนี้ก็ยังมีอีกไม่ว่าจะจัดฝั่งขวาให้ห่างจากจอก็ทำได้โดยใช้คำสั่ง margin-right และยังสามารถกำหนดให้ห่างจากขอบจอด้านล่างก็ได้โดยใช้คำสั่ง margin-bottom คำสั่งนี้เหมาะในการใช้จัดข้อมูลที่มีแท็ก <div>คล่อมอยู่

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css

Top