iT邦幫忙

1

【CSS筆記】實現等高欄位

  • 分享至 

  • xImage
  •  

第一種:border

解說:利用中間欄位的border-left與border-right來實現視覺上的等高效果,但缺點很明顯:「左右兩邊內容超出中間欄位時,會露出」

<!-- html -->
<div class="box">
  <div class="left">
    <p>test string!</p>
  </div>
  <div class="center">
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="right">
    <p>test string!</p>
  </div>
</div>
/* Css */
.box {
  position:realtive;
}
.left,.right {
  position: absolute;
  top: 0;
  width: 300px;
}
.left {
  left: 0;
  text-align: right;
}
.right {
  right: 0;
}
.center {
  border-left: 300px solid #cd0000;
  border-right: 300px solid #036;
  background-color: #0fa;
  text-align: center;
}

點這裡看codepen

第二種: 負margin

解說:利用特大padding-bottom增加尺寸(高度),再用負的margin-bottom把後面的元素給拉上來!

<!-- html -->
<div class="box">
  <div class="item left">
    <p>test string!</p>
  </div>
  <div class="item center">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item right">
    <p>test string!</p>
  </div>
</div>
/* Css */
.box {
  overflow: hidden;
}
.item {
  float: left;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.left {
  background: #036;
}
.center {
  width: 50%;
  background: #0fa;
}
.right {
  background: #cd0000;
}
.left,.right {
  width: 25%;
}

點這裡看codepen

第三種: table-cell

解說:table-cell本身就是等高,所以可以用table-cell來達成真的等高的效果。

<div class="box">
  <div class="item left"><p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item center">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item right">
    <p>test string!</p>
  </div>
</div>
.box {
  display: table;
  width: 100%;
  table-layout: fixed;
  box-shadow: 0 0 1px #cd0000;
  text-align:center;
}
.item {
  display: table-cell;
}

.center {
  background: #0fa;
}
.right {
  background: #cd0000;
}
.left {
  background: #036;
}

點這裡看codepen

第四種:absolute

解說:利用absolute的top與bottom稱滿父元素高度,達成等高效果。(所有的html配置都一樣,就直接PO上CSS了!)
缺點也是很明顯,因為子元素依靠absolute來拉稱高度的關係,父元素要有高度才行,子元素自己本身也不能自
行擴充高度。

.box {
  position: relative;
  padding-bottom: 300px;
}
.item {
  position: absolute;
  text-align: center;
  top: 0;
  bottom: 0;
}
.left {
  left: 0;
  right: 70%;
  background: #036;
}
.right {
  right: 0;
  left: 70%;
  background: #cd0000;
}
.center {
  left:30%;
  right:30%;
  background: #0fa;
}

點這裡看codepen

第五種:flex

解說:利用橡皮筋的彈性盒子本身的特性,來達成等高了效果。

<div class="box">
  <div class="item left">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item center">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item right">
    <p>test string!</p>
  </div>
</div>
.box {
  display:flex;
}

.item {
  width: 0;
  flex:1;
  margin: 0 auto;
  text-align: center;
}
.left {
  background: #036;
}
.right {
  background: #cd0000;
}
.center {
  background: #0fa;
}

點這裡看codepen


心得

主要寫這篇做個CSS的筆記,如何達成等高的效果,除了上面這五種方式外,也可以使用grid來實現,或是利用js來控制元素的高度
。上面這五種最大的分別就是「視覺上」「實際上」的等高與瀏覽器的兼容性,像是首兩種border負margin就屬於視覺上的等高,看起來是一樣高的,但其實只是利用視覺上的呈現來讓人覺得是等高的!而table-cellflex實現的就是天然的等高。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言