ต่อไป »

[dekjaidee]

นั่งงมจนงงจริงๆ ครับ ทั้งวันเลย ตามภาพครับ



ต้องการแสดง 4 คอลัมน์ต่อแถวครับ และมีคำว่า Happy อยู่ตรงกลาง  แต่ปัญหาคือ ภาพ (ทำเป็น Background) ที่กรอบ มันต้องกำหนดความสูง ใช้ height:100% แล้ว ก็ไม่ได้ครับ และถ้าแสดงในมือถือแถวละ 2 คอลัมน์ แถวที่ 2 มันจะติดกับแถวแรกครับ ขอแนวการเขียนทีครับ ผมงงจริงๆ

โค๊ด:

<div class="col-md-3 col-xs-6">
	<div style="height:105px;background-image:url(photo/image.png);background-size:100%;padding10px;">
	</div>
</div>

<div class="col-md-3 col-xs-6">
	<div style="height:105px;background-image:url(photo/image.png);background-size:100%;padding10px;">
	</div>
</div>

<div class="col-md-3 col-xs-6">
	<div style="height:105px;background-image:url(photo/image.png);background-size:100%;padding10px;">
	</div>
</div>

<div class="col-md-3 col-xs-6">
	<div style="height:105px;background-image:url(photo/image.png);background-size:100%;padding10px;">
	</div>
</div>

ไม่ทราบว่าต้องแก้ตรงไหนครับ รบกวนทีครับ

 

[BOS]

ถ้าต้องการ inline ทั้งหมด ก็แบบนี้ครับ
.container>.row.p-1>.col-md-3.col-xs-6.p-1*8>.position-relative[style='padding-bottom:56.25%;']>.position-absolute.d-flex.w-100.h-100[style='top:0;left:0;background:url(photo/image.png) 100% 100%;']>p.m-auto.text-white{Happy}

ตัวอย่างครับ => https://codepen.io/60ss/pen/wEryxY

[montira1]

ถ้าต้องการ inline ทั้งหมด ก็แบบนี้ครับ
.container>.row.p-1>.col-md-3.col-xs-6.p-1*8>.position-relative[style='padding-bottom:56.25%;']>.position-absolute.d-flex.w-100.h-100[style='top:0;left:0;background:url(photo/image.png) 100% 100%;']>p.m-auto.text-white{Happy}

ตัวอย่างครับ => https://codepen.io/60ss/pen/wEryxY



+1ให้ค่ะ