css-实现两列布局

SSQ107699
193 阅读3分钟

概述

实现两列布局的就是同一行里,一个元素的宽度确定,另一个元素的宽度自适应 正常两个块元素的排列遵循流式布局,每个块级元素占据一行

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #left {
            width: 400px;
            height: 300px;
            background-color: #ccc;
        }
        
        #right {
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

这是基础结构和样式,接下来就要介绍如何让他们实现两列布局了

float-margin

原理就是确定宽度的元浮动,另一个元素采用margin把位置让出


    <style>
       <style>
     
        
        #left {
            float:left;
            width: 400px;
            height: 300px;
            background-color: #ccc;
        }
        
        #right {
            margin-left:400px;
            height: 400px;
            background-color: red;
        }
    </style>
    </style>

为固定宽度的元素添加浮动,元素脱离文档流下面的元素上移,一部分被浮动元素覆盖,利用margin把覆盖的部分让出,但是这样有一个问题就是,没有浮动的元素的子元素如果有clear:both也就是左右不接触浮动元素,就会使子元素向下移动,就是下图这种情况

为了避免这种情况就会有下一种方法float-margin(fix),这是float-margin的进阶版

float-margin(fix)

在不浮动元素套一个父元素,父元素也浮动,浮动的同时宽度为100%,这样由于宽度过大挤到下一行,利用margin把他向上移动,覆盖的浮动元素使用position:relative显现,然后不固定宽度的元素利用margin确定自己的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #left {
            float: left;
            width: 400px;
            height: 300px;
            background-color: #ccc;
            <!-- 显示元素-->
            position: relative;
        }
        
        #father {
            width: 100%;
            height: 400px;
            
            float: right;
            margin-top: -300px;
        }
        
        #right {
            margin-left: 400px;
            height: 400px;
            background-color: red;
        }
        
        #son {
            height: 200px;
            background-color: lightcoral;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="father">
        <div id="right">
            <div id="son"></div>
        </div>
    </div>
</body>
</html>

table&table-cell

实现原理就是把父元素设为display:table,把两个子元素设为 display:table-cell,这样子元素就类似于table的td,一个固定宽度,另一个就自适应

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #left {
            display: table-cell;
            width: 400px;
            height: 300px;
            background-color: #ccc;
        }
        
        #box {
            width: 100%;
            display: table;
        }
        
        #right {
            display: table-cell;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>

</html>

flex

实现原理,父元素设置display为flex,一个固定宽度后,另一个flex:1,自动占据剩余的所有位置

float+BFC

固定宽度浮动脱离文档流,使用overflow:hidden让元素成为BFC,这样不会与浮动重叠,BFC是一个独立的区域,它的内部不会影响外部布局,也不会被外界形象,不会被浮动元素覆盖,会直接避开

position

每个元素设置position:absolute,父元素position:relative通过对top,left和 right的设置确定布局

grid

设置父元素的display:grid;grid-template-colums:固定宽度 auto

avatar
文章
阅读
粉丝