Kotak kotak yang responsif

170

Saya bertanya-tanya bagaimana saya bisa membuat tata letak dengan kotak responsif . Setiap kotak akan memiliki konten yang selaras secara vertikal dan horizontal . Contoh spesifik ditampilkan di bawah ...

kotak responsif dengan konten

html  css  responsive-design  grid-layout  aspect-ratio 
— Garethdn
sumber
Saya benci bagaimana pertanyaan dengan jawaban yang bagus hanya ditutup secara acak oleh orang-orang dengan pandangan yang benar-benar hebat tentang seperti apa seharusnya stackoverflow. Jika mereka memiliki jawaban yang baik, diterima, terangkat ... mengapa menutupnya ??? Di mana kebingungan yang bisa didapat? Tentu, pada "kotak kuadrat responsif" sendiri mungkin perlu sedikit, atau banyak, menjelaskan, tetapi ini adalah 7 tahun, 160+ pertanyaan dengan 400+ jawaban. Saya memilih kembali.
— leinaD_natipaC

Jawaban:

416

Anda dapat membuat kotak kuadrat responsif dengan konten terpusat vertikal dan horizontal hanya dengan CSS . Saya akan menjelaskan bagaimana dalam proses langkah demi langkah tetapi pertama di sini adalah 2 demo dari apa yang dapat Anda capai:

Kotak persegi 3x3 responsif Gambar persegi responsif dalam kisi 3x3

Sekarang mari kita lihat bagaimana membuat kotak responsif mewah ini!


1. Membuat kotak responsif:

Trik untuk menjaga elemen persegi (atau apa pun aspek rasio lainnya) adalah menggunakan persen padding-bottom.
Catatan: Anda dapat menggunakan bantalan atas juga atau margin atas / bawah tetapi latar belakang elemen tidak akan ditampilkan.

Karena bantalan atas dihitung sesuai dengan lebar elemen induk ( Lihat MDN untuk referensi ), tinggi elemen akan berubah sesuai dengan lebarnya. Anda sekarang dapat menjaga rasio aspeknya sesuai dengan lebarnya.
Pada titik ini Anda dapat membuat kode:

HTML :

 <div></div>

CSS

div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

Berikut adalah contoh tata letak sederhana dari kotak 3 * 3 menggunakan kode di atas.

Dengan teknik ini, Anda dapat membuat rasio aspek lainnya, di sini adalah tabel yang memberikan nilai padding bawah sesuai dengan rasio aspek dan lebar 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%



2. Menambahkan konten di dalam kotak

Karena Anda tidak dapat menambahkan konten secara langsung di dalam kotak (itu akan memperluas tinggi mereka dan kotak tidak akan menjadi kotak lagi), Anda perlu membuat elemen anak (untuk contoh ini saya menggunakan divs) di dalamnya dengan position: absolute;dan meletakkan konten di dalamnya . Ini akan mengeluarkan konten dari alur dan menjaga ukuran kotak.

Jangan lupa untuk menambahkan position:relative;div orangtua sehingga anak-anak absolut diposisikan / berukuran relatif terhadap orangtua mereka.

Mari kita tambahkan beberapa konten ke kotak 3x3 kotak kami:

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%;
}

HASIL <- dengan beberapa pemformatan untuk membuatnya cantik!


3. Memasukkan konten

Secara horizontal:

Hal ini cukup mudah, Anda hanya perlu menambahkan text-align:centerke .content.
HASIL

Penjajaran vertikal

Ini menjadi serius! Triknya adalah menggunakan

display:table;
/* and */
display:table-cell;
vertical-align:middle;

tapi kita tidak bisa menggunakan display:table;pada .squareatau .contentdivs karena bertentangan dengan position:absolute;sehingga kita perlu membuat dua anak di dalam .contentdivs. Kode kami akan diperbarui sebagai berikut:

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%;
}



Kami sekarang telah selesai dan kami dapat melihat hasilnya di sini:

HASIL LENGKAP LANGSUNG

biola yang dapat diedit di sini

— web-tiki
sumber
2
@ d.raev ya. Persentase bantalan dan margin dihitung sesuai dengan lebar induk. Periksa di sini untuk padding developer.mozilla.org/en-US/docs/Web/CSS/padding
— web-tiki
4
Ini bagus. Hanya head-up untuk orang lain: jika Anda menggunakan * { box-sizing: border-box; }Anda harus menyesuaikan tinggi dan lebar dalam .content div hingga 100%. :)
— Rob Flaherty
2
apa kalkulus di balik nilai margin? bagaimana jika saya ingin mengatur grid 5x5?
— kiwi1342
2
@ kiwi1342 jumlah semua margin + semua lebar pada satu baris harus sama dengan 100%. Jadi untuk kisi 5x5, Anda bisa menggunakan lebar 18% dengan margin 1% di setiap sisi elemen.
— web-tiki
1
Fantastis. Hanya kepala di atas: Untuk memusatkan secara horizontal & vertikal, cukup buat .centent a flexbox denganjustify-content: center; align-items: center; flex-flow: column nowrap;
— NonameSL
14

Anda bisa menggunakan unit vw (view-width), yang akan membuat kuadrat responsif sesuai dengan lebar layar.

Mock-up cepat ini adalah:

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>
Luaskan cuplikan

— jbutler483
sumber
4
Jangan gunakan margin-left: -4px;gunakan margin-right:-4px. Alih-alih tidak mengacaukan inkonsistensi di mincharspace tetapi diatur ke ukuran font induk wrapper ke 0 dan daripada untuk elemen anak diatur ulang ke 1rem(relatif-em)
— Roko C. Buljan
9

Jawaban yang diterima sangat bagus, namun ini bisa dilakukan dengan flexbox.

Berikut adalah sistem kisi yang ditulis dengan sintaks BEM yang memungkinkan ditampilkannya 1-10 kolom per baris.

Jika ada baris terakhir tidak lengkap (misalnya Anda memilih untuk menampilkan 5 sel per baris dan ada 7 item), item trailing akan dipusatkan secara horizontal. Untuk mengontrol perataan horizontal dari item tambahan, cukup ubah justify-contentproperti di bawah .square-gridkelas.

.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%;
}

Tampilkan cuplikan kode

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

Ini diuji dalam FF dan Chrome.

— Patrick Berkeley
sumber
3
Namun, Anda menggunakan padding-bottom untuk memperbaiki ketinggian, jadi sebenarnya, jawaban yang sama seperti yang diterima. Satu-satunya perbedaan adalah bagaimana kisi dibuat, bukan kisi kuadrat.
— extempl
0

Saya menggunakan solusi ini untuk kotak responsif dari ransum yang berbeda:

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%; }

Lihat demo di JSfiddle.net

— mitjajez
sumber
2
akan bermanfaat jika Anda menjelaskan lebih lanjut tentang jawaban Anda ... atau bahkan memasukkan JSFiddle
— Wavesailor
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.