ฉันสงสัยว่าจะทำอย่างไรกับการสร้างเลย์เอาต์ด้วยสี่เหลี่ยมที่ตอบสนองได้ แต่ละช่องจะมีเนื้อหาแนวตั้งและแนวนอน ตัวอย่างที่เฉพาะเจาะจงจะแสดงด้านล่าง ...
ฉันสงสัยว่าจะทำอย่างไรกับการสร้างเลย์เอาต์ด้วยสี่เหลี่ยมที่ตอบสนองได้ แต่ละช่องจะมีเนื้อหาแนวตั้งและแนวนอน ตัวอย่างที่เฉพาะเจาะจงจะแสดงด้านล่าง ...
คำตอบ:
คุณสามารถสร้างตารางตอบสนองของสี่เหลี่ยมที่มีเนื้อหากึ่งกลางแนวตั้งและแนวนอนด้วยCSSเท่านั้น ฉันจะอธิบายวิธีในกระบวนการทีละขั้นตอน แต่แรกที่นี่คือ 2 การสาธิตของสิ่งที่คุณสามารถทำได้:
ตอนนี้เรามาดูวิธีสร้างสี่เหลี่ยมที่ตอบสนองต่อจินตนาการเหล่านี้!
เคล็ดลับในการรักษาองค์ประกอบตาราง (หรืออะไรก็ตามอัตราส่วนอื่น ๆ ) padding-bottom
คือการใช้ร้อยละ
หมายเหตุด้านข้าง: คุณสามารถใช้การเสริมด้านบนด้วยหรือขอบบน / ล่าง แต่พื้นหลังขององค์ประกอบจะไม่แสดง
เนื่องจากการเติมด้านบนถูกคำนวณตามความกว้างขององค์ประกอบหลัก ( ดู MDN สำหรับการอ้างอิง ) ความสูงขององค์ประกอบจะเปลี่ยนตามความกว้าง ตอนนี้คุณสามารถคงอัตราส่วนไว้ตามความกว้าง
ณ จุดนี้คุณสามารถรหัส:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
นี่คือตัวอย่างเลย์เอาต์อย่างง่ายของตารางสี่เหลี่ยมจัตุรัส 3 * 3 โดยใช้โค้ดด้านบน
ด้วยเทคนิคนี้คุณสามารถสร้างอัตราส่วนภาพอื่น ๆ ได้นี่คือตารางที่ให้ค่าการเสริมด้านล่างตามอัตราส่วนและความกว้าง 30%
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
ในขณะที่คุณไม่สามารถเพิ่มเนื้อหาโดยตรงในช่องสี่เหลี่ยม (มันจะขยายความสูงและช่องของพวกเขาจะไม่กลายเป็นช่องสี่เหลี่ยมอีกต่อไป) คุณจำเป็นต้องสร้างองค์ประกอบลูก (สำหรับตัวอย่างนี้ position: absolute;
และนำเนื้อหาภายในพวกเขา . สิ่งนี้จะนำเนื้อหาออกจากการไหลและทำให้ขนาดของสี่เหลี่ยมจัตุรัส
อย่าลืมที่จะเพิ่มposition:relative;
ใน divs ผู้ปกครองเพื่อให้เด็กที่แน่นอนอยู่ในตำแหน่ง / ขนาดที่ค่อนข้างจะเป็นผู้ปกครอง
ลองเพิ่มเนื้อหาลงในตาราง 3x3 ของเรา
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
ผลลัพธ์ <- ด้วยการจัดรูปแบบบางอย่างเพื่อให้สวย!
แนวนอน:
นี้สวยง่ายคุณก็ต้องเพิ่มการtext-align:center
ผลลัพธ์.content
การจัดตำแหน่งแนวตั้ง
มันกลายเป็นเรื่องจริงจัง! เคล็ดลับคือการใช้
display:table;
/* and */
display:table-cell;
vertical-align:middle;
แต่เราไม่สามารถใช้display:table;
บน.square
หรือ.content
div เพราะมันขัดแย้งกับposition:absolute;
ดังนั้นเราจึงจำเป็นต้องสร้างลูกสองคนใน.content
divs รหัสของเราจะได้รับการอัพเดตดังนี้:
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
เราเสร็จแล้วและสามารถดูผลลัพธ์ได้ที่นี่:
* { box-sizing: border-box; }
คุณจะต้องปรับความสูงและความกว้างใน. เนื้อหาเป็น 100% :)
justify-content: center; align-items: center; flex-flow: column nowrap;
คุณสามารถใช้หน่วย vw (ดูความกว้าง) ซึ่งจะทำให้สี่เหลี่ยมตอบสนองตามความกว้างของหน้าจอ
ตัวอย่างที่รวดเร็วของเรื่องนี้คือ:
html,
body {
margin: 0;
padding: 0;
}
div {
height: 25vw;
width: 25vw;
background: tomato;
display: inline-block;
text-align: center;
line-height: 25vw;
font-size: 20vw;
margin-right: -4px;
position: relative;
}
/*demo only*/
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: rgba(200, 200, 200, 0.6);
transition: all 0.4s;
}
div:hover:before {
background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
margin-left: -4px;
margin-right:-4px
ค่อนข้างจะไม่ยุ่งกับความไม่สอดคล้องกันใน mincharspace แต่ตั้งเป็นแบบอักษรขนาดใหญ่ของตัวห่อเป็น 0 และมากกว่าสำหรับองค์ประกอบของเด็กตั้งค่าเป็น1rem
(ญาติ -em)
flexbox
คำตอบที่ได้รับการยอมรับเป็นที่ดีได้อย่างไรก็ตามเรื่องนี้สามารถทำได้ด้วย
นี่คือระบบกริดที่เขียนด้วยไวยากรณ์ BEMที่อนุญาตให้แสดงคอลัมน์ 1-10 ต่อแถว
หากมีแถวสุดท้ายไม่สมบูรณ์ (ตัวอย่างเช่นคุณเลือกที่จะแสดง 5 เซลล์ต่อแถวและมี 7 รายการ) รายการที่ต่อท้ายจะอยู่กึ่งกลางแนวนอน ในการควบคุมการจัดตำแหน่งแนวนอนของรายการที่ติดตามเพียงแค่เปลี่ยนjustify-content
คุณสมบัติภายใต้.square-grid
คลาส
.square-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square-grid__cell {
background-color: rgba(0, 0, 0, 0.03);
box-shadow: 0 0 0 1px black;
overflow: hidden;
position: relative;
}
.square-grid__content {
left: 0;
position: absolute;
top: 0;
}
.square-grid__cell:after {
content: '';
display: block;
padding-bottom: 100%;
}
// Sizes – Number of cells per row
.square-grid__cell--10 {
flex-basis: 10%;
}
.square-grid__cell--9 {
flex-basis: 11.1111111%;
}
.square-grid__cell--8 {
flex-basis: 12.5%;
}
.square-grid__cell--7 {
flex-basis: 14.2857143%;
}
.square-grid__cell--6 {
flex-basis: 16.6666667%;
}
.square-grid__cell--5 {
flex-basis: 20%;
}
.square-grid__cell--4 {
flex-basis: 25%;
}
.square-grid__cell--3 {
flex-basis: 33.333%;
}
.square-grid__cell--2 {
flex-basis: 50%;
}
.square-grid__cell--1 {
flex-basis: 100%;
}
ซอ: https://jsfiddle.net/patrickberkeley/noLm1r45/3/
นี่คือการทดสอบใน FF และ Chrome
ฉันใช้โซลูชันนี้เพื่อตอบสนองกล่องปันส่วนที่แตกต่างกัน:
HTML:
<div class="box ratio1_1">
<div class="box-content">
... CONTENT HERE ...
</div>
</div>
CSS:
.box-content {
width: 100%; height: 100%;
top: 0;right: 0;bottom: 0;left: 0;
position: absolute;
}
.box {
position: relative;
width: 100%;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }
ดูตัวอย่างบนJSfiddle.net