两栏布局，左边固定（200px），右边自适应

最新推荐文章于 2022-04-12 17:17:14 发布
最新推荐文章于 2022-04-12 17:17:14 发布
阅读量518 收藏 2
点赞数
原文链接：https://segmentfault.com/a/1190000015948575
版权

计算宽度cal

图片描述

使用float+BFC方法

图片描述
触发BFC，建议大家多去了解BFC，很多时候布局都会用到。

flex方案

图片描述

使用absolute+margin-left方法

图片描述

float+margin-left方案

图片描述

table方案

图片描述

weixin_34341117
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
并排两个div，左边固定div宽度200px，右边div自适应的几种实现
l1013000729的博客
07-26 771
<div class= "container"> <div class="left"></div> <div class="right"></div> </div> <style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .l...
html左200px右边自适应,实现一个div，左边固定div宽度200px，右边div自适应
weixin_39945789的博客
06-17 310
实现一个div，左边固定div宽度200px，右边div自适应/*方法一： BFC(块级格式化上下文)*/.container{width:1000px;height:400px;border: 1px solid red;}.left{width:200px;height:100%;background: gray;float: left;}.rigth{overflow:hidden; /*...
两栏布局——左边固定右边自适应
weixin_43901550的博客
08-31 258
** 左边固定右边自适应 ** 效果图如下： html布局代码如下： <div class="left"></div> <div class="main"></div> 样式如下： 方法一：浮动法 .left{ width: 200px; height: 400px; float: left; background-color:red; } .main{ height: 400px; margin-lef
2种方法实现经典的左侧固定宽度200px，右侧自适应宽度的布局
weixin_34128411的博客
03-29 822
今天去面试前端人员，随即出了一个经典的布局问题，即如标题所示。可是结果令我很惊讶，超过一半的人都没答对，亦或是只答对一半！在此记录下用两种方法，第一种普通的方法，第二种是利用flex布局。 首先我们假定页面上已有下列元素： <body > <div id="left" ></div&gt...
两栏布局，左边固定，右边自适应解决方案
qq_38890813的博客
11-12 469
方案一: (浮动+margin-left)左边浮动，右边margin-left:width， 俩个div即可 浮动，元素脱离文档流，不占据空间，后面的元素可以排到最左侧，所以 margin-left CSS: .left{float:left;width:200px;background-color: red;} .right{margin-left:200px;backg...
左侧固定宽度，右侧自适应宽度的CSS布局
10-30
一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能包含导航菜单，右侧放置辅助信息，中间则是主要内容。一个简单的实现方式是...
CSS三列布局两端固定宽度中间自适应
01-19
两端固定宽度，中间自适应结构： 复制代码代码如下: ”wrap”> ”main”> ”content”></div> </div> ”submain”>2</div> ”sidebar”>3</div> </div> 复制代码代码如下: .wrap{width: 500px;border: 1px solid;...
css实现两栏固定中间自适应的方法
12-13
在网页设计中，创建两栏固定宽度，中间内容自适应宽度的布局是常见的需求。这里我们将探讨四种不同的CSS方法来实现这一目标。 1. **利用绝对定位和margin** 这种方法通过将左右两栏设置为绝对定位，使它们脱离文档...
CSS两栏布局的几种方法（左边固定，右边自适应）
ricoshallow的博客
05-09 300
直接上代码吧~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
实现一个两栏布局，左边固定宽度，右边自适应？
weixin_42220039的博客
10-13 666
1、利用 calc 计算宽度的方法 css代码如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&gt;div{height: 100%;} #box1&gt;div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;...
实现两栏布局(左边固定，右边自适应)的六种方法
qq_43456687的博客
04-12 4004
html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> 方法一：利用float .left { float: left; width: 200px; background-color: pink;
html左200px右边自适应,2种方法实现经典的左侧固定宽度200px，右侧自适应宽度的布局...
weixin_39867327的博客
06-17 1179
今天去面试前端人员，随即出了一个经典的布局问题，即如标题所示。可是结果令我很惊讶，超过一半的人都没答对，亦或是只答对一半！在此记录下用两种方法，第一种普通的方法，第二种是利用flex布局。首先我们假定页面上已有下列元素：第一种方法：float+margin-left这种方法是最简单也是最容易想到的方法(至少在我看来)，请看如下CSS：div{height:200px;}#left{float: l...
CSS中实现左边固定，右边自适应
小猪猪and小马马的博客
06-11 421
1. 左边左浮动，右边加个overflow:hidden;    #lt{ float: left;width:200px; background: #ff0;}    #rt{ overflow: hidden; background: #f0f;} 2. 左边左浮动，右边加个margin-left;    #lt{ float: left; width:
如何实现左侧200px, 右侧自适应呢? css
weixin_59519449的博客
11-29 361
就是能够在随着浏览器的大小进行去自适应
实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200px
Shine的博客
04-27 1825
原题目：牛客网-阿里巴巴2016前端开发工程师笔试(一)：10题 要求自适应，那一开始就不能把左侧content的宽度给设死了。尝试了几次一开始思维定式就先从左至右写吧，于是 .content { height: 400px; margin: 0; margin-right: 210px;
css 关于两栏布局，左边固定，右边自适应
weixin_30315435的博客
08-31 244
好几个星期都没写博客了，最近不忙也不闲，稀里糊涂过了两个星期，之前几个月内天天坚持签到。最近也没签到。哈哈，说正事。 今天做东钿互金平台后台页面，昨天做了一个登录页面，业偶碰到了一个难题。等下也要把它写出来，先说今天的吧。两栏布局，左边固定，右边自适应 百度了一下，使用了http://www.zhangxinxu.com/wordpress/2010/03/纯css实现侧边栏分栏高度自动相等/...
css实现两栏布局，左侧固定宽，右侧自适应的七种方法
KleyChan的博客
10-17 994
一个面试会问的问题，如何实现两个盒子，左侧固定宽度，右侧自适应。 下面是实现的其中方法： 1、利用 calc 计算宽度的方法 css代码如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&amp;gt;div{height: 100%;} #box1&amp;gt;div{float: left;} .left1{width: 100px;b...
经典面试题：一栏定宽，另一栏自适应，且等高
不吃菠菜的大力
10-24 319
html： 你订单咋咋十号是好的多多多多多多多多多多多多多多多多多多多多多多多多多多多多 苟富贵 css： .wrapper { overflow: hidden; } .left { float: left; width: 200px; background-color: red; margin-bottom: -3000px; pad
flex左边宽度固定右边自适应怎么写
最新发布
06-10
可以使用 flex 布局中的 flex-grow 属性来实现左边固定宽度，右边自适应的效果。具体做法如下： HTML 代码： ```html 左边固定宽度 右边自适应宽度 ``` CSS 代码： ```css .container { display: flex; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值