ทำยังไงให้ ตอนเป็นมือถือ div ซ้อนกันได้ครับ
Moderator: mindphp
-
pond
- PHP Super Hero Member
- โพสต์: 570
- ลงทะเบียนเมื่อ: 25/05/2016 9:44 am
ทำยังไงให้ ตอนเป็นมือถือ div ซ้อนกันได้ครับ
ทำยังไงให้ ตอนเป็นมือถือ div ซ้อนกันและสลับตำแหน่งกันได้ครับ
-
M031
- PHP Hero Member
- โพสต์: 156
- ลงทะเบียนเมื่อ: 20/11/2015 9:05 am
Re: ทำยังไงให้ ตอนเป็นมือถือ div ซ้อนกันได้ครับ
ก่อนอืนเลยต้องบอกว่า สิ่งที่ถามคุณถามเรียกว่า Responsive design คือทำให้สามารถเปิดบนเว็ป บนโทรศัพท์ และแท็ปเล็ต ได้และไม่ผิดเพี้ยน
ซึ่งสามารถศึกษาหรือดูได้จาก http://getbootstrap.com/getting-started/ หรือเจ้าอื่นๆ
ผมจะทำการยกตัวอย่าง ของ bootstrap คือ
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css" >
</head>
<body>
<!-- อันที่ 1 -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="หมา.png" class="img-responsive"/>
</div>
<!-- อันที่ 2 -->
</div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="แมว.png" class="img-responsive"/>
</div>
<!-- อันที่ 3 -->
</div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="หมู.png" class="img-responsive"/>
</div>
</body>
</html>
<!--
อธิบาย สั่งเกตุตรง
col-lg หมายความว่า ขนาดหน้าจอตั้งแต่ 1200px ขึ้นไป (หน้าจอคอม)
col-md หมายความว่า ขนาดหน้าจอตั้งแต่ 992px ขึ้นไป (หน้าจอคอม)
col-sm หมายความว่า ขนาดหน้าจอตั้งแต่ 768px ขึ้นไป (หน้าแท็ปเล็ต)
col-xs หมายความว่า ขนาดหน้าจอไม่เกิน 767px (หน้าโทรศัพท์)
*** ในแต่ละ col จะมีสูงสุดได้แค่ 12
ซึ่งถ้าหาก เราเปิดบนเว็ปไซรต์ (browser chome หรือ firefox)
- ที่มีขนาดหน้าจอมากกว่า 1200px ในแถวนั้น จะมีรูป หมา แมว หมู ใน1แถวยาว3รูปพอดี เพราะว่า col-lg-4 มีทั้งหมด 3 ซึ่งก็เท่ากับ 4*3 = 12 นั้นเอง
- หรือที่มีขนาดหน้าจอมากกว่า 992Px ในแถวนั้น จะมีรูป หมา แมว หมู ใน1แถวยาว3รูปพอดี เพราะว่า col-md-4 มีทั้งหมด 3 ซึ่งก็เท่ากับ 4*3 = 12 นั้นเอง
- หรือที่มีขนาดหน้าจอมากกว่า 768px ในแถวนั้น จะมีรูป หมา แมว หมู ใน1แถวยาว2รูปและขึ้นแถวถัดไปอีก1รูป เพราะว่า col-sm-6 มีทั้งหมด 3 ซึ่งก็เท่ากับ 6*3 = 18
ซึ่ง อย่างที่บอกไว้ข้างต้น แถวหนึ่งจะสามารถจุได้แค่ 12 columns ดั้งนั้นมันจะดันตกลงอีกแถวหนึ่งให้ครับ
- หรือที่มีขนาดหน้าจอไม่เกิน 767px ในแถวนั้น จะมีรูป หมา แมว หมู อย่างละหนึ่งรูป เพราะว่า col-xs-12 เต็มพอดีมันจะดันลงมาให้
สามารถทดสอบผ่านท่าง google chome ได้ โดยกด F-12 เสร็จต่อด้วย ctrl + ship + m
ซึ่งก็ตรงกับคำถามที่ว่า ตอนเป็นมือถือ div ซ้อนกัน
หากจจะสลับตำแหน่ง ควรจะต้องศึกษา cssเพิ่ม เรื่อง float:left และ float:right
ผิดพลาดประกาณใดขออภัยมาณที่นี้
-->
ซึ่งสามารถศึกษาหรือดูได้จาก http://getbootstrap.com/getting-started/ หรือเจ้าอื่นๆ
ผมจะทำการยกตัวอย่าง ของ bootstrap คือ
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css" >
</head>
<body>
<!-- อันที่ 1 -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="หมา.png" class="img-responsive"/>
</div>
<!-- อันที่ 2 -->
</div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="แมว.png" class="img-responsive"/>
</div>
<!-- อันที่ 3 -->
</div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="หมู.png" class="img-responsive"/>
</div>
</body>
</html>
<!--
อธิบาย สั่งเกตุตรง
col-lg หมายความว่า ขนาดหน้าจอตั้งแต่ 1200px ขึ้นไป (หน้าจอคอม)
col-md หมายความว่า ขนาดหน้าจอตั้งแต่ 992px ขึ้นไป (หน้าจอคอม)
col-sm หมายความว่า ขนาดหน้าจอตั้งแต่ 768px ขึ้นไป (หน้าแท็ปเล็ต)
col-xs หมายความว่า ขนาดหน้าจอไม่เกิน 767px (หน้าโทรศัพท์)
*** ในแต่ละ col จะมีสูงสุดได้แค่ 12
ซึ่งถ้าหาก เราเปิดบนเว็ปไซรต์ (browser chome หรือ firefox)
- ที่มีขนาดหน้าจอมากกว่า 1200px ในแถวนั้น จะมีรูป หมา แมว หมู ใน1แถวยาว3รูปพอดี เพราะว่า col-lg-4 มีทั้งหมด 3 ซึ่งก็เท่ากับ 4*3 = 12 นั้นเอง
- หรือที่มีขนาดหน้าจอมากกว่า 992Px ในแถวนั้น จะมีรูป หมา แมว หมู ใน1แถวยาว3รูปพอดี เพราะว่า col-md-4 มีทั้งหมด 3 ซึ่งก็เท่ากับ 4*3 = 12 นั้นเอง
- หรือที่มีขนาดหน้าจอมากกว่า 768px ในแถวนั้น จะมีรูป หมา แมว หมู ใน1แถวยาว2รูปและขึ้นแถวถัดไปอีก1รูป เพราะว่า col-sm-6 มีทั้งหมด 3 ซึ่งก็เท่ากับ 6*3 = 18
ซึ่ง อย่างที่บอกไว้ข้างต้น แถวหนึ่งจะสามารถจุได้แค่ 12 columns ดั้งนั้นมันจะดันตกลงอีกแถวหนึ่งให้ครับ
- หรือที่มีขนาดหน้าจอไม่เกิน 767px ในแถวนั้น จะมีรูป หมา แมว หมู อย่างละหนึ่งรูป เพราะว่า col-xs-12 เต็มพอดีมันจะดันลงมาให้
สามารถทดสอบผ่านท่าง google chome ได้ โดยกด F-12 เสร็จต่อด้วย ctrl + ship + m
ซึ่งก็ตรงกับคำถามที่ว่า ตอนเป็นมือถือ div ซ้อนกัน
หากจจะสลับตำแหน่ง ควรจะต้องศึกษา cssเพิ่ม เรื่อง float:left และ float:right
ผิดพลาดประกาณใดขออภัยมาณที่นี้
-->
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 79