左侧盒子固定宽度，右边盒子自适应，右侧里左边盒子自适应，右边盒子固定宽度

最新推荐文章于 2022-07-28 15:27:53 发布

liukun003

最新推荐文章于 2022-07-28 15:27:53 发布

阅读量1k

点赞数

分类专栏：前端文章标签：自适应布局

本文链接：https://blog.csdn.net/a811567770/article/details/96433199

版权

这篇博客探讨了UI设计中的一种常见布局方式，即左侧盒子保持固定宽度，右侧盒子根据屏幕大小自适应调整其宽度。内容详细介绍了如何实现这种布局，适用于不同设备和屏幕尺寸。

摘要由CSDN通过智能技术生成

公司ui写给我的自适应盒子
在这里插入图片描述

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liukun003

关注关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

左中右布局占满屏幕，左右两边的盒子指定宽度，中间的盒子自适应大小。

weixin_43338566的博客

04-18

1481

展示效果：另一种方式的展示效果（浏览器窗口可以视为以下网页布局中的父盒子）： HTML代码如下：   &lt...

如何实现左侧宽度固定，右侧宽度自适应？

cocoyu99的博客

08-14

186

Document .left { width: 200px; height: 200px; background-color: red; float: left; } .right { height: 200px; background-color: blue; } */ /* 方法二、对右侧:div进行绝对定位，然后再设置right=0 / / .outer { width: 100%; height: 500px; background-color: yellow; posit...

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

css左边容器固定宽度，右边自适应的几种效果

Cryday的小屋

11-01

4887

内容代码如下： <div class="container"> <div class="left"></div> <div class="right"></div> </div> 第一种： .left { float: l

CSS布局——左边固定，右边自适应的4种方法

lwf的博客

04-06

7965

HTML： <div class="outer"> <div class="left">我在左边</div> <div class="right">我在右边</div> </div> <div

关于css常见4种左边固定，右边自适应的布局

qq_36202069的博客

01-09

919

在我们开发或者面试中常常听到面试官问到这个问题，那么小伙伴们如何解答呢？ html代码：一，通过margin来设置： css代码： .aside{ width:210px; height:400px; background-color:forestgreen; float:left; } .content{ height:40

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

LuckXinXin的博客

05-24

1002

左侧固定宽度，右侧自适应宽度的两列布局实现 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div> 在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度方法1：左侧div设置成浮动：flo...

前端面试场景题:两个盒子，左边固定宽，右边自适应，有几种方法?

sdasadasds的博客

07-28

2488

方法三calc(100%-固定内容的宽度)用calc函数动态计算数值。方法六使用inline-block携手calc函数设置宽度。方法二absolute定位和margin值实现。方法五使用table和table-cell实现。陆荣涛前端学习交流Q群858752519。方法一float来和BFC实现。方法四flex布局轻松搞定。加群备注CSDN推荐。公共HTML代码部分。...

两列布局：左边固定右边自适应

qq_44169219的博客

11-08

739

实现这样一个两列布局：左边宽度固定（200px），右边自适应。 <div class = "block"> <div class = "left">固定宽度</div> <div class = "right">自适应</div> </div> 方法一解析：左边设置了浮动，脱离了正常文档流。右边...

两栏布局之右边固定左边自适应

qq_41801117的博客

03-24

1924

两栏布局是咱们在项目中经常遇到的一种布局方式，在这里记录一下两栏布局之右边固定，左边自适应的布局方式。首先给定2个div盒子。 <div id="app"> <div class="left"></div> <div class="right"></div> </div> 1、flex布局，我比较喜欢采用的一种，简单粗暴，但是flex可能存在兼容性问题，如果是手机端就可以放心使用。首先设置display: flex，让

margin-left实现左侧盒子固定右侧盒子自适应

酷酷的旭

08-12

5912

<!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-...

两列布局——左侧宽度固定，右侧宽度自适应的两种方法

daxwvxhx715404的博客

08-22

344

　　今天做了一个练习，要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单，毕竟只是练习，但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满意，于是自己继续琢磨着，问问一些前辈，希望得到一些思路。终于，皇天不负有心人，在自己翻译的一篇关于BFC的文章上，我找到了解决的方法。　　关于左侧宽度固定，右侧宽度自适应两列布局的一...

css左侧盒子固定右边自适应

m0_56896206的博客

04-18

2113

盒子左侧固定右边自适应 使用浮动加外边距设置父盒子高度,让子盒子高度100%继承父盒子,给做盒子设置宽度和浮动背景色,然后给右侧盒子设置marginleft宽度和背景色 <style> .box{ height: 50px; } .box >div{ height: 100%; } .box1{ width: 20px;

左边固定，右边自适应的七种方法

mango

06-29

4473

给左边div设置float:left，给右边div设置margin-left 左边div绝对定位，右边div设置margin-left 给父盒子设置display:table，给子盒子设置display:table-cell

左边固定右边自适应

weixin_30553065的博客

06-21

1.左侧盒子: 通过子绝父相定位,宽度固定; 右侧盒子: 宽度100%,再设置margin-left为左侧盒子的宽度大小 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="vi...

js计算在未知盒子高度时，实现左侧两个盒子的高度与右侧一个盒子的高度保持一致的功能

weixin_40426459的博客

09-19

1048

1.排版需求如下，其中roadmap、buEngagement、overview的高度都是未知的，但是在输入内容后要使得他们的高都保持在一个水平线上 2.首先获得各个模块盒子的高 3.然后将整体排版按左右分为两个模块比较高度来取一个最大值，将其赋值给overview模块，这样overview的总高始终是左侧两盒子的总高 4.接下来，当overview高度达到一定高度时，要考虑给左...

vue项目中图片破图问题兼容火狐浏览器

a811567770的博客

01-04

1488

lazyImage Vue图片不显示用默认图片代替 <lazy-image :src="item.fmlj" init-src="/images/no_cover3.png"/> import lazyImage from 'common/plugin/lazyImage' components:{ lazyImage }, ...

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