【CSS】CSS右侧固定宽度，左侧自适应宽度

最新推荐文章于 2022-07-26 10:33:18 发布

一起来学吧

最新推荐文章于 2022-07-26 10:33:18 发布

阅读量826

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/liuzhenhe1988/article/details/119802740

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

目前市面上很多好用的前端UI框架，大部分都是按照百分比自适应宽度的，但是在项目中还会遇到类似于右侧固定宽度，左侧自适应宽度的情况

实现

1、样式

/*样式*/
.fixed-right{

position:absolute;

right:30px;

top:0px;

bottom: 0px;

width:300px;

background: red;

}

.auto-width{

width:100%;

padding-right: 350px;

}

.content{

background: greenyellow;
height: 600px;
width:100%;

}

2、页面

<body>
	<div class="content">
		<div class="fixed-right">右侧固定宽度</div>
		<div class="auto-width">左侧自适应宽度</div>
	</div>
</body>

最终效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一起来学吧

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

实现左侧固定宽度, 右侧自适应的两栏布局的八种方案

技术无止境，人生仍探索。

07-23

4920

HTML <!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" /> &lt

div+css模板布局右侧固定，左侧自适应

09-11

div+css模板布局右侧固定，左侧自适应

参与评论您还未登录，请先登录后发表或查看评论

css实现右侧固定宽度，左侧宽度自适应

ytlizhen1的专栏

05-22

1441

反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？要实现这种布局，也算比较简单。我们先给出html结构： div id="wrap"> div id="sidebar" sty

css怎么实现右边固定，左边自适应

ZHOUshi19990605的博客

07-26

2543

冷门css面试题

【CSS】右边宽度固定，左边自适应

LuviaWu的博客

11-08

701

右边宽度固定，左边自适应 第一种： &amp;lt;style&amp;gt; body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width...

左侧固定宽度，右侧自适应宽度的CSS布局

10-30

要实现左侧固定宽度，右侧自适应宽度的CSS布局，首先需要了解几个关键的CSS属性和概念。这些包括宽度（width）、绝对定位（position: absolute）、层叠上下文（z-index）、以及外边距（margin）等。 1. 宽度（width...

总结几种实现右边宽度固定，左边宽度自适应的css布局

热门推荐

weixin_34364979的博客

03-07

1万+

一.display:table-cell的应用首先是简单的html：下面是css代码：以下是效果图：必须注意的是，左侧div必须设置超过父元素减去右侧元素的宽度但是这个方法会产生一个问题，它会使左边的div高度等于右侧div的高度二.flex布局同样使用上面的htmldai'ma下面是css代码效果图如下：可以看到左侧的没有设置宽度，但是却跟右侧的宽度一致，实现了宽度自...

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

weixin_30293135的博客

04-29

601

方法一：浮动布局这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果 HTML Markup <div id="left">Left sidebar</div> <div id="content">Main Content</div> CSS Code <style type="...

右边定宽，左边自适应css布局总结（三种方案）

luckyone1111的博客

11-19

826

右边定宽，左边自适应布局 /* 注意清除浮动 */ .container{height: 200px;overflow: hidden;position: relative;} /* 方案一：左边左浮动，右边右浮动，同时左边margin-left为负值 */ .left{float:left;width:100%;height:300px;margin-right:-2

CSSS实现右侧定宽左侧自适应

Preserve

10-30

2373

csss实现右侧固定宽度，左侧自适应，或者左恻固定宽度右侧自适应 首先，html结构如下： --> 自适应宽度注意，html中必须使用div标签，不要妄图使用p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。 1、固定宽度区浮动，自适应区不设宽度而设置margin 下面的例子是左边栏固定宽度，右

关于利用css 实现右侧固定左侧自适应布局的解决方案

alonia的博客

03-22

6358

最近遇到要求实现右侧大小固定，左侧自适应的问题，根据亲身实现，现总结如下： 1.我们首先看一下左边固定右边自适应的情况 html ：我在左边我在右边 css : #left{ border:1px solid #000; float:left;

右边宽度固定，左边自适应

mangguom23的博客

01-19

159

1实现方式一:最简单的方式使用flex的方式实现 <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style> <body> <di

css两列布局一边固定一边自适应

DOM曼珠沙华的博客

03-25

2294

css两列布局一、优先渲染主要部分当主要部分是自适应且需要优先渲染的时候，可采用以下三种方式：  <div class="main"> <div class="main-content">main</div> </div>

css布局——左侧宽度固定，右侧自适应

包磊磊的博客

05-11

340

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="all"&.

CSS左侧固定宽右侧自适应（兼容所有浏览器）

吃瓜群众的博客

10-23

2714

方法一、浮动布局 HTML Left sidebar Main Content CSS Code *{margin: 0;padding: 0;} #left { float: left; width: 220px; background-color: green; } #content { background-color: orange; margin-left: 220px;/*