ในการจัดรูปภาพให้เรียงกันสวยๆบนเว็บไซต์เมื่อก่อนต้องใช้ Table ในการเข้ามาช่วยให้รูปภาพเรียงอยู่ในระนาบเดียวกันโดยในการใช้ Table จะไม่รองรับกับอุปกรณ์พวกสมาร์ทโฟน แท็บเล็ต แต่ในปัจจุบันเรามีตัวช่วยในการ
- ตัวอย่างการทำรูปภาพให้เรียงเป็นแถวเดียวกันดังรูปตัวอย่าง
- 1.เพิ่ม css ลงในแท็ก <head>
2.เพิ่ม bootstrap ลงในแท็ก <head>
โค้ด: เลือกทั้งหมด
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
3.ในแท็ก <body>โค้ด: เลือกทั้งหมด
<script src="js/jquery-3.3.1.slim.min.js" type="text/javascript"></script> <script src="js/popper.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script>
4.รวมโค้ดโค้ด: เลือกทั้งหมด
<div class="container-fluid"> <div class="row"> <div class="col-lg-3"> <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" /> </div> <div class="col-lg-3"> <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" /> </div> <div class="col-lg-3"> <img src="img/cat-3217406_960_720.jpg" alt="" width="300" /> </div> <div class="col-lg-3"> <img src="img/cute-3206543_960_720.jpg" alt="" width="300" /> </div> </div> </div>
โค้ด: เลือกทั้งหมด
<html> <head> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-3.3.1.slim.min.js" type="text/javascript"></script> <script src="js/popper.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-3"> <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" /> </div> <div class="col-lg-3"> <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" /> </div> <div class="col-lg-3"> <img src="img/cat-3217406_960_720.jpg" alt="" width="300" /> </div> <div class="col-lg-3"> <img src="img/cute-3206543_960_720.jpg" alt="" width="300" /> </div> </div> </div> </body> </html>
วิธีการทำให้รูปมาเรียงติดๆกัน
- 1.เพิ่ม css ลงในแท็ก <head>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Booststap
-บทเรียน Javascript
-บทเรียน CSS
-javascript แนะนำ โค้ด บทบทความ เทคนิค
-Jquery คู่มือ plugins ajax validate