1. 程式人生 > >css橫向佈局的3種方式

css橫向佈局的3種方式

 

  首先我們先看看 html部分  bodyTip 內的三個標籤我們需要讓他們橫向顯示並且根據瀏覽器寬度平均顯示

<body>
<!--頭部-->
<div class="head">
    我是頭部
</div>
<div class="bodyTip">
    <!--左邊-->
    <div class="leftTip itemDiv" style="background: red">我在左邊</div>
    <!--中間-->
    <div class="centerTip itemDiv" style="  background: yellow">我在中間</div>
    <!--右邊-->
    <div class="rightTip itemDiv"  style=" background: green">我在右邊</div>
</div>
<div class="bottomTip">我是底部</div>
</body>

 

1、table 佈局

    記得我們最初的剛學的時候是用table來佈局的,但是隻能應用一些簡單的佈局,對於複雜的佈局頁面,程式碼會顯的很亂

2、fiex 配合  justify-content

   這2個命令配合會自動平均分給每個div,如果需要指定每個不同的寬度,使用width即可,這裡只演示最簡單的功能

    css程式碼

 .bodyTip{
        display: flex;
        justify-content: space-between;
        border: 1px solid;
 }

  效果圖

 

3、fiex 另一種方式 ,這種方式自動填充了背景色

    css程式碼

.bodyTip {
    display: flex;
    border: 1px solid;
}

.itemDiv {
/* flex 取值0 ~ 1 */
    flex: 1;
}

  效果圖

 

 

3、當然還可以用float 佈局,但是這種方式會產生很多問題,本人建議慎用,但是可以配合fiex 一起使用

4、之前見有人用過絕對定位和相對定位配合使用達到佈局效果,昨天試了一下,實在是做不出來