.outter //สินค้า
{
width: 50%;
height: 200px;
}
.inner
{
width: 100%;
position: absolute;
height: 100%;
background-color: red;
}
มันจะออกมาประมาณนี้ครับ
ซึ่งดูแล้วขอบสีแดงมันล้นกรอบ (outter ออกมา) เยอะจนสุดจอเลยครับ
ซึ่งวิธีแก้ปัญหา ในกรณีนี้ก็คือ ต้องใส่ postion:relative เข้าไปในกรอบนอกคือ outter ด้วยครับ เปลี่ยนโค๊ดใหม่ก็จะเป็น
.outter //สินค้า
{
width: 50%;
height: 200px;
postion:relative;
}
.inner
{
width: 100%;
position: absolute;
height: 100%;
background-color: red;
}
จะออกมาได้แบบนี้ครับ ใครเคยเจอปัญหานี้ ทำตามนี้ได้เลยครับ ผ่านชัวร์ 100% ครับผม
credit : ภาพประกอบจากเว็บ http://www.jumnotebook.com