如何实现两列布局和三列布局？面试问到了了_html-js-css

今天面试问到了两列布局：
问：如何实现两列布局，你有几种方法？
来记录下吧！

1. 两列布局什么是两列布局？

两列布局就是一列定宽，一列自适应的布局

HTML如下：

<body>
    <div class="containor">
        <div class="left">
            我是左大侠
            <p>英俊又潇洒p>
        div>
        <div class="right">
            我是右公主
            <p>美丽又可爱p>
        div>
    div>
body>

不做 *** 作，样式如下：

固定左边，右边自适应实现方式 1. 子绝父相，右盒子定位left>=左宽，且right要为0，否则达不到自适应效果

效果如下：

2. float + margin-right

让左盒子浮动，脱离文档流，右盒子给一个左外边距

3. absolute + margin-left

这种方式跟上一种类似，通过让做盒子脱离文档流，右盒子给一个左外边距

 .left{
            background-color: yellowgreen;
            width: 200px;
            position:absolute;
        }
        .right{
            background-color: pink;
            margin-left: 210px;
        }

4. Flexd性布局

设置父盒子的display:flex，右盒子的flex：1，占据100%

 .containor{
         display: flex;
          width: 100%;
          height: 300px;

        } 
        .left{
            background-color: yellowgreen;
            width: 200px;
        }
        .right{
            background-color: pink;
            flex:1;
            margin-left: 10px;
        }

5. float + BFC(overflow)

让做盒子浮动，BFC区域不会与浮动盒子重叠，右盒子使用overflow：hidden来触发BFC

6. grid布局

通过grid生成块级网格布局，然后使用template属性的columns指定网格的列宽

2. 三列布局

左右两列定宽，中间自适应，三列布局有双飞翼布局和圣杯布局

1、结构上：中间自适应的区域要在left和right上
2、父盒子必须是IE怪异模型，即box-sizing: border-box，这样不会因为设padding而把盒子挤出去。
3、margin的负值是使float元素移动到上面。左盒子的margin-left= -100%是父元素的宽度，把左盒子放到主盒子的左边，右盒子的margin-left= -200px,把右盒子移动到主盒子（main）的右边。

1. 双飞翼布局

HTML:

<body>
    <div class="containor">
        <div class="main">
            <div class="main_box">
                <h1>我是大BOSSh1>
            div>
        div>

        <div class="left">
            我是左大侠
            <p>英俊又潇洒p>
        div>

        <div class="right">
            我是右公主
            <p>美丽又可爱p>
        div>
    div>
body>

2. 圣杯布局

使用position，将左和右盒子分别定位到最左边和最右边，因为浮动会遮住中间（主盒子）的显示。
HTML：

<body>
    <div class="containor">
        <div class="main">
                <h1>我是大BOSS,要在中间自适应h1>
        div>

        <div class="left">
            我是左大侠
            <p>英俊又潇洒p>
        div>

        <div class="right">
            我是右公主
            <p>美丽又可爱p>
        div>
    div>
body>

css:

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/web/1319815.html

如何实现两列布局和三列布局？面试问到了了

发表评论

评论列表（0条）