css 两列布局右边固定左边可伸缩但是有最小宽度如何实现？

Posted 2023-04-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 两列布局右边固定左边可伸缩但是有最小宽度如何实现？相关的知识，希望对你有一定的参考价值。

至少也给出个类似于百度的搜索结果页的布局：右边块固定大小，左边块也固定大小，右边块向右边浮动。拉伸变动浏览器的大小，能改变左右2块的距离，中间空白可伸缩。如何实现。看百度的搜索结果页，就能知道什么效果了。

参考技术A 你要留在中间的给他加个css样式
样式就用.BD表示
就写
.BDmargin:0px
auto;width:400px;height:300px
然后给你的右边那个弄个绝对定位
.Bdposition:absolute;right:0px;top:0px
把这两个样式弄进去就ok了
右边漂浮的东西

布局：左宽度固定，右边自适应

需求：

左侧固定宽，右侧自适应屏幕宽；

左右两列，等高布局；

左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）

方法1：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #left {
        float: left;
        width: 220px;
        background-color: green;
    }
    #content {
        background-color: orange;
        margin-left: 220px;/*==等于左边栏宽度==*/
    }
</style>
<body>
    <div id="left">Left sidebar</div>
    <div id="content">Main Content</div>
</body>
</html>

方法2：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

这个方法有个缺点就是左边的固定块被右边的父元素遮挡住了，如果左边是一个菜单需要点击，那么这个方法就不是很适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #left {
        background-color: green;
        float: left;
        width: 220px;
        margin-right: -100%;
    }
    #content {
        float: left;
        width: 100%;
    }
    #contentInner {
        margin-left: 220px;/*==等于左边栏宽度值==*/
        background-color: orange;
    }
</style>
<body>
    <div id="left">Left Sidebar</div>
    <div id="content">
        <div id="contentInner">Main Content</div>
    </div>
</body>
</html>

方法3：网格布局

关键点在于设置grid-template-columns: 200px auto;，第一个200px表示左边的，auto表示右边的自动，如果需要设置等高的效果，将grid-template-rows: 200px;这个属性去掉，可以给left和right都设置一个最小的高度，如果内容超出的话，会自动增加高度（一边超出高度，两边都会自动增加高度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout.grid .left-right-center{
        width:100%;
        display: grid;
        grid-template-rows: 200px;
        grid-template-columns: 200px auto;
    }
    .left{
        background-color: red;
    }
    .right{
        background-color: blue;
    }
</style>
<body>
<section class="layout grid">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
    </article>
</section>
</body>
</html>

以上是关于css 两列布局右边固定左边可伸缩但是有最小宽度如何实现？的主要内容，如果未能解决你的问题，请参考以下文章

如何通过 CSS 实现一个左边固定宽度右边自适应的两列布局

css的布局及图形展示--三角形圆形半圆等面试点

css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现？

布局：左宽度固定，右边自适应

css 两列布局右边固定左边可伸缩但是有最小宽度如何实现？