Paano gumawa: equal height column

Matututunan kung paano gumawa ng equal height column gamit ang CSS.

Paano gumawa ng equal height column

Kapag ang iyong mga column ay dapat na magpakita ng pagtatabi, karaniwang nais mo na mayroon silang magkapantay na taas (kasama ang pinakamataas na taas).

Subukan nang personal na.

Unang hakbang - Magdagdag ng HTML:

<div class="col-container">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Ikalawang hakbang - Magdagdag ng CSS:

.col-container {
  display: table; /* Gawing mukhang talahanayan ang elemento ng container */
  width: 100%; /* I-set sa buong lapad para lumaganap ang buong pahina */
}
.col {
  display: table-cell; /* Gawing mukhang cell ng talahanayan ang mga elemento sa loob ng container */
}

Subukan nang personal na.

Responsive Equal Height

Ang mga column na nilikha namin sa nakaraang halimbawa ay responsibo (kung nag-aayos ka ng laki ng window ng browser sa iyong pagsubok, makikita mo na sila ay awtomatikong nag-aayos sa mga tanggapin na kinakailangan na laki at taas). Subalit, para sa maliit na layut (katulad ng smart phone), maaaring gusto mong sila ay mag-stand na sa halip na magkakatabi sa pagitan ng pader:

Para sa paggawa nito, magdagdag ng media query at magtakda ng isang bintang pixel value:

Mga halimbawa

/* Kung ang window ng browser ay mas maliit sa 600px, ilagay ang mga linyang magtatabi na naglalagay */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Subukan nang personal na.

Makakakuha ng magkapantay na taas at lapad gamit ang Flexbox

Maaari mo ring gumawa ng magkapantay na taas na box gamit ang Flexbox:

Mga halimbawa

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Subukan nang personal na.

Pansin:Internet Explorer 10 at ang mas maagang bersyon ay hindi sumusuporta sa Flexbox.

相关页面

教程：CSS Flexbox