两列自适应布局

最新推荐文章于 2024-06-11 12:15:54 发布
最新推荐文章于 2024-06-11 12:15:54 发布
阅读量587 收藏 1
点赞数
分类专栏： Css 文章标签： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjcjava/article/details/77715858
版权

要求：
　1、两个盒子在同一行
　2、右边的盒子需要占满剩下的空间
　3、两个盒子不能重叠

方式一： 左侧栏宽度不固定

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>两列自适应布局</title>
        <style>
            *{padding: 0;margin: 0;}
            html,body{width:100%;height:100%;}
            #wrap{
                width: 100%;
                height: auto;
                min-height: 100%;
            }
            #header{
                width: 100%;
                height: 30px;
                background: grey;
            }
            .container{
                width: 100%;
                padding-bottom: 30px;
            }
            /*父元素添加伪元素样式清除浮动，处理float的子元素无法撑开父元素高度问题*/
            .clearfix:after {
              content: ".";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
            .sideBox{
                float:left;
                width:30%;
                color:#FFF;
                background: #999;
            }
            .mainBox{
                float:right;
                width:70%;
                color:#FFF;
                background: #333;
            }
            #footer{
                position: relative;
                width: 100%;
                height: 30px;
                margin-top: -30px;
                background: grey;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="header">头部信息</div>
            <div class="container clearfix">
                <div class="mainBox">
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                </div>
                <div class="sideBox">
                    侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                    侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                    侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                    侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                    侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                    侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                </div>
            </div>
        </div>
        <div id="footer">底部信息</div>
    </body>
</html>

方式二： 左侧栏宽度固定

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>两列自适应布局</title>
        <style>
            *{padding: 0;margin: 0;}
            #header{
                width: 100%;
                height: 30px;
                background: grey;
            }
            .container{
                width: 100%;
                height: auto;
                margin:10px 0;
            }
            /*父元素添加伪元素样式清除浮动，处理float的子元素无法撑开父元素高度问题*/
            .clearfix:after {
              content: ".";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
            .mainBox{
                display: inline-block;
                width: 100%;
                margin-left: -100px;
                background: #333;
            }
            .mainBoxContent{margin-left: 110px;}
            .sideBox{
                float: left;
                position: relative;
                width: 100px;
                background: #999;
            }
            #footer{
                width: 100%;
                height: 30px;
                position: relative;
                background: grey;
            }
        </style>
    </head>
    <body>
        <div id="header">头部信息</div>
        <div class="container clearfix">
            <div class="mainBox">
                <div class="mainBoxContent">
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                    主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
                </div>
            </div>
            <div class="sideBox">
                侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
                侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
            </div>
        </div>
        <div id="footer">底部信息</div>
    </body>
</html>
飞扬_柳絮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
布局分类（两列）
04-15
HTML网站布局（两列布局）css基础类的就可以学习
浅析两列自适应布局的3种思路
09-27
本文主要探讨了在网页设计中实现两列自适应布局的三种常见方法：float、table和flex。两列自适应布局是指一列的宽度由内容决定，另一列则占据剩余的屏幕空间。这种布局方式在响应式设计中尤其重要，因为它能确保在...
如何用css实现两列布局?
最新发布
weixin_45596561的博客
06-11 1443
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
两列自适应布局的4种思路
weixin_34319374的博客
05-03 267
前面的话 　　前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思路   float 【思路一】float 　　在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应...
CSS左右两列自适应高布局示例代码
09-25
CSS左右两列自适应高布局是一种网页布局技术，用于创建一个由左右两部分组成的页面布局，且这两列的高度能够自动调整以匹配最高的列，无论内容多少。这种布局对于创建对称的页面结构非常有用，例如双栏式布局，一侧...
左右两列自适应中间列内容即随中间内容高度自适应的布局
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <... <head> <... charset=utf-8″ /> <... bod
两列自适应布局方案整理
weixin_33836223的博客
02-09 139
前提 本文讨论的是两列自适应布局：左列定宽/不定宽，右列自适应。 虽然分这两种情况，但实际上不定宽的方案同样适用于定宽的场景，因此不定宽的方案泛用度更高。 左列定宽，右列自适应 margin + float <div class="parent"> <div class="left"><p>...
两列或三列自适应布局
初漾的博客
05-19 494
一、三列布局 左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。左右两栏的宽度为200像素。 第一种：双飞翼布局（内部添加了一个盒子：innner，少了定位） 思路：盒子顺序：中间（宽度：100%），左边（宽度：200），右边（宽度：250） CSS样式：设置float:left。 左盒子：margin-left: 负100%,右盒子：margin-
常见的两列自适应的几种布局方式
ggbee_的博客
06-16 850
第一种：采用浮动/定位的方式来实现自适应； <!-- 方式一: 采用浮动/或者定位 --> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { /* 定位方式 第二步 */ position: relative;
关于页面的多种自适应布局——两列布局
weixin_30484739的博客
11-04 98
我们在切页面的时候打交道最多的就是关于布局排版的技巧，我这里总结了一些平时做页面时用的到各种布局技巧，作为笔记便于日后随时查询。 1、简单结构1，列表在前，内容在后 1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margi...
两列布局
qq_43505774的博客
02-01 80
flex如果没有规定就取默认 内容宽度排成一行 如果规定flex：n（份数）； 会自动计算减去其他元素的固定宽度 <div style="display: flex;"> <div style="width: 100px;background-color: aqua;height: 300px;"> </div> <div style="flex: 1;background-color: red;height:
基本的两列自适应布局、三列自适应布局
weixin_42788847的博客
04-06 191
1、两列自适应，左定右适应 #div1{ width: 100px; display: inline-block; background-color: black; height: 300px; } #div2{ display: inline-block; position: absolute; left: 100px; right: 0px; background-color: red; height: 300px; } 或者 #div1{ width: 100px; floa
CSS两列布局
brizer的博客
06-01 1804
在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？ 传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下： css代码如下： .color-blue { color:blue; } .color-yellow { color:yellow; } .background
Float 两列布局示例
weixin_30273501的博客
07-17 481
最终样式如下： 网页代码如下： View Code <body> <header> Header </header> <div id="wrapper"> <div id="sidebar"> SideBar ...
html三行两列div布局
09-09
这个HTML三行两列的布局是由著名网页设计师阿捷在2004年发布在《网页设计师》杂志上的，被称为XHTML1标准的DIV CSS布局。它是一个非常经典的布局，可以在IE、Mozilla和Opera浏览器中实现居中和高度自适应。完整的代码如下所示： ```html <!-- 双飞翼布局 --> <div class="container"> <div class="middle"> <div class="inner">中间自适应</div> </div> <div class="left">左边固定宽度200px</div> <div class="right">右边固定宽度200px</div> </div> ``` 对应的CSS代码如下所示： ```css <style> * { margin: 0; padding: 0; } .container { min-width: 600px; height: 300px; background: pink; } .middle { float: left; width: 100%; height: 300px; background-color: turquoise; } .middle .inner { margin: 0 200px; } .left { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: teal; } .right { float: left; width: 200px; height: 300px; margin-left: -200px; background-color: seagreen; } </style> ``` 这种布局的主要特点是中间的自适应部分被嵌套在一个新的父级块中，通过设置左右外边距来实现布局调整。左边和右边的固定宽度部分则通过负外边距进行布局。这种布局可以有效地实现三行两列的效果。注意，这种布局方式增加了一层DOM树节点，可能会增加渲染树生成的计算量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值