前端 - CSS布局问题 , 如何实现一行多列div,类似于表格
PHPz
PHPz 2017-04-17 11:05:48
0
4
677

也就是可以像表格那样,自由地把一行拆分成多列,甚至列内也做拆分,并且每列所占的大小/比例可以精确控制

大家都有哪些实践经验可以分享?我试过使用float为left来控制,总感觉不灵活,而且容易算不准。

PHPz
PHPz

学习是最好的投资!

全部回覆(4)
伊谢尔伦

水平拆分方案A:百分比寬度 float

可以全瀏覽器兼容,但是需要用到一些hack解決float定位的問題,同時需要考慮清除浮動。

在很多比例(1/3、2/3是最常見的情形)不能整除的情況下,在一些情形下出現1px的誤差。

水平拆分方案B:百分比寬度 不帶間隙的inline-box

缺點同上。hack量和方案A不相上下。

額外的好處是有很多vertical-align方式可以指定,額外的壞處是很多vertical-align的屬性值對於各個瀏覽器來說都不一樣。最常見的vertical-align還是middle和baseline,頂多再加個top和bottom。

水平拆分方案C:表格

用表格當然是全瀏覽器支持的選擇。

水平拆分方案D:display屬性代替表格

用display:table和display:table-cell等屬性替代表格,以兼顧語義。IE8 和現代瀏覽器支持。

更多前瞻屬性……

  • 使用css3的新特性calc來計算值 float/inline-box
  • 使用flexbox

下麵介紹bootstrap的一套可複用的方案,這套方案是從方案A發展而來,主題思想是抽取出布局中可以複用的類。

一個常見的列拆分如下:

<p class="container">
  <p class="row">
    <p class="col-md-3"></p>
    ...
  </p>
</p>

bootstrap的柵格係統的核心,即是使用這樣的一個三層結構,最內層使用width來分配100%的父級寬度。

對於單列的類名規則是:col-[lg/md/sm/xs]-[1~12]。詳情見bootstrap柵格選項。

中間的變量跟響應式media查詢有關,這裏不詳細解釋。最後一個值x,既等分父容器的1/12乘以x。如下:

.col-md-3 { float:left; }
@media (min-width: 992px) {
  .col-md-3 { width: 25%; }
  /* 父级容器的3/12 */
}

在bootstrap柵格係統中,每個col之間都有30px間隙,如何做到等分間隙呢?見如下CSS屬性:

/* 列容器设置左右padding */
.col-md-3 {
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/* 行容器设置负margin撑开 */
.row {
  margin-right: -15px;
  margin-left: -15px;
}
/* 行容器清理浮动 */
.row:before,
.row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}
/* container再补完被row挖去的15px */
.container {
  padding-right: 15px;
  padding-left: 15px;
}

等等,是不是有哪裏不對?計算一下寬度:

每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)

怎麼會每個都1/4等分父容器呢?

還有這個屬性在作用:

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

bootstrap使用*來選取所有元素(這是我對bootstrap感到厭煩的原因,為了開發效率,犧牲選擇器效率),並強製使用border-box計算寬度,因而達到了布局上的大和諧這樣的計算公式:

父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)

這樣做以後,可以很方便地拿出對應的類來使用,也可以級聯,類似於row-col-row-col-row-col……

    p.container
        h1 test
        p.row
            p.col-sm-6
                p.row
                    p.col-sm-6
                        img(src="holder.js/100%x180")
                    p.col-sm-6
                        img(src="holder.js/100%x180")
            p.col-sm-6
                p.row
                    p.col-sm-3
                        img(src="holder.js/100%x180")
                    p.col-sm-9
                        img(src="holder.js/100%x180")

(上麵用了jade的語法展示層級,和bootstrap的holder.js來補充一個img元素以展示效果)。效果如下:

bootstrap方案的適用麵是IE8 及其他現代瀏覽器,在這個方案中,主要的問題在於box-sizing屬性的兼容性,小瑕疵是百分比寬度帶來的±1px誤差的問題。

Peter_Zhu

覺得可以類似 導航欄那種做法吧

迷茫

http://thjiang.sinaapp.com/59

黄舟

width相同,float:left

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板