CSS布局 两列布局之单列定宽,单列自适应布局思路

前言

说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。比如斗鱼的直播间，后台管理系统都是常用的

我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果

float

【float + margin】

将定宽的一列使用float，而自适应的一列使用计算后的margin

<style>
    .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合浮动
    .f1 .left{position: relative;float: left;width: 100px;}
    // width: 100% 以免浮动后内容撑开宽度。 margin-left: -100px; 由于宽度设置100%这会挤到下一行去了，利用margin 负值特性来规避
    .f1 .rightWrap{float: left;width: 100%;margin-left: -100px;}
    .f1 .right{margin-left: 120px;}
</style>
<div class="case-box f1" data-case="f1">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示：

【float + margin + calc】
[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

<style>
    .f2 .parent{overflow: hidden;zoom: 1;}
    .f2 .left{float: left;width: 100px;margin-right: 20px;}
    .f2 .right{float: left;width: calc(100% - 120px);} // 利用calc可以不同长度单位进行动态计算的特性
</style>
<div class="case-box f2" data-case="f2">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

【float + overflow】
还可以使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性，所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

<style>
    .f3 .parent{overflow: hidden;zoom: 1;}
    .f3 .left{float: left;width: 100px;margin-right: 20px;}
    .f3 .right{overflow:hidden;zom:1;} // 触发bfc和haslayout
</style>
<div class="case-box f3" data-case="f3">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

inline-block

inline-block内联块布局的主要缺点是需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【inline-block + margin + calc】
一般来说，要解决inline-block元素之间的间隙问题，要在父级设置font-size为0，然后在子元素中将font-size设置为默认大小

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

<style>
    .f4 .parent{font-size:0;}
    .f4 .left{
        display: inline-block;
        vertical-align: top;
        width: 100px;
        margin-right: 20px;
        font-size: 16px;
    }
    .f4 .right{
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 120px);
        font-size: 16px;
    }
</style>
<div class="case-box f4" data-case="f4">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

【inline-block + margin + margin负值】

<style>
    .f5 .parent{
        font-size: 0;
    }
    .f5 .left{
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100px;
        font-size:16px;
    }
    .f5 .rightWrap{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: -100px;
        font-size: 16px;
    }
    .f5 .right{margin-left: 120px;}
</style>
<div class="case-box f5" data-case="f5">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示:

table

使用table布局的缺点是元素被设置为table后，内容撑开宽度，所以需要设置width:100%。若要兼容IE7-浏览器，需要改为<table>结构。由于table-cell元素无法设置margin，若需要在元素间设置间距，需要增加结构

<style>
    .f6 .parent{display:table;width: 100%;table-layout: fixed;}
    .f6 .left,.f6 .rightWrap{display:table-cell;}
    .f6 .left{width: 100px;}
    .f6 .right{margin-left: 20px;}
</style>
<div class="case-box f6" data-case="f6">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="rightWrap" style="background-color: pink;">
            <div class="right"  style="background-color: lightgreen;">
                <p>right</p>
                <p>right</p>
            </div>
        </div>
    </div>
</div>

效果展示:

absolute

absolute布局的缺点是由于父元素需要设置为relative，且子元素设置为absolute，所以父元素的高度并不是由子元素撑开的，需要单独设置。

<style>
    .f7 .parent{
        position: relative;
        width: 100%;
        height:40px;
    }
    .f7 .left{
        position: absolute;
        left:0;
        width:100px;
    }
    .f7 .right{
        position: absolute;
        left:120px;
        right:0;
    }
</style>
<div class="case-box f7" data-case="f7">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

flex

flex弹性盒模型是非常强大的布局方式。但由于其性能消耗较大，适合于局部小范围的布局

[注意]IE9-浏览器不支持

flex布局教程

<style>
    .f8 .parent{
        display: flex;
    }
    .f8 .left{
        width:100px;
        margin-right: 20px;
    }
    .f8 .right{
        flex:1 1 auto;
    }
</style>
<div class="case-box f8" data-case="f8">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

grid

使用栅格布局grid实现
[注意]IE10-浏览器不支持

grid布局详细教程

<style>
    .f9 .parent{
        display: grid;
        /* 子项目分别按照 100px固定宽度 以及1fr的栅格宽度分配 */
        grid-template-columns: 100px 1fr;
        /* 子项目间隙 */
        grid-gap:20px
    }
</style>
<div class="case-box f9" data-case="f9">
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

效果展示:

原文地址：https://www.cnblogs.com/shiyou00/p/10654644.html

时间： 2024-10-26 18:07:06

CSS布局 两列布局之单列定宽,单列自适应布局思路的相关文章

css 两列布局中单列定宽单列自适应布局的6种思路

前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现布局 float [思路一]float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错的效果 [1]float + margin 将定宽的一列使用float,而自适应的一列使用计

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

左边定宽右边自适应布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 300px; } .main { box-sizing: bord

左右定宽中间自适应布局

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .left { float: left; width: 200px; height: 200px; background-color: re

右侧定宽左侧自适应布局

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .left { margin-right: 200px; height: 200px; background-color: red; } .

布局两列div等高方法

一.左右布局,左侧div绝对定位,外div相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;paddi

左边定宽 右边自适应的写法

<html><head> <title>左边定宽 右边自适应</title> <meta charset="utf-8"> <style type="text/css"> .left{float: left;width: 200px;margin-right: -100%} .content{float: left;width: 100%;} .contentInside{margin-left

CSS 常见两列布局、三列布局

一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="right">右

NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;