分享一种自适应宽度的布局(右侧定宽，左侧自适应宽度，同时左右紧邻)

最新推荐文章于 2023-10-20 20:13:31 发布
最新推荐文章于 2023-10-20 20:13:31 发布
阅读量540 收藏
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013394527/article/details/100578397
版权

布局规则如标题所述：右侧定宽，左侧自适应宽度，同时左右紧邻。

具体描述：左边一个TextView，右边有另一个View，但希望当左边的TextView宽度太小时， 两个view能整体居左；当左边TextView宽度太大时，希望左边textView能充分利用横向的空间，但不会将右边的view完全挤到没空间。

    分享这种自适应宽度的布局， 因为我自己在开发过程中经常碰到，但是过几天就会忘记。  下次再找去项目代码里找也很麻烦，分享出来帮助自己，也帮助了全网的开发者。  

    这个也确实不是 通用模式的布局，如果不是多次实验 很难得出这个结论。  懂的人看图就能懂到底 是分享什么，希望对读者有帮助。

 

 

简化的写法:

u013394527
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
左右布局，背景图左侧定宽，自适应
xiaoxiao_xiaoliu的专栏
02-04 599
如上图所示，左侧的阴影和sidebar右侧的2px的背景，代码 个人体检报告 个人体检指标追踪 个人阳性指标追踪 style.css 为了使阴影兼容浏览器，把阴影切成背景图 body{ background: #ccc; } .wrapper { width: 80%; min-width: 1280px; max-width:
实现左边固定宽度右边自适应布局
行言Tang、
06-07 422
第一种        #box{width: 100%;background: red;overflow:hidden;}        #lef{float:left;width: 300px;height: 300px;background: blue;}        #rig{margin-left: 310px;background: pink;height: 500px;}
微信小程序开发中scroll-view左右滑动布局
09-17
微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写，欢迎大家参考和提意见微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写，欢迎大家参考和提意见
（原创）实现左侧TextView宽度自适应并且可以显示右侧TextView的布局
Android_xiong_st的博客
10-20 655
实现左侧TextView宽度自适应并且可以显示右侧TextView的布局
微信小程序 —— 多个view左右对齐的巧用方法（display:flex布局）
Wu_shuxuan的博客
10-13 4万+
在以前写web端代码的时候，遇到俩个，三个的div平铺在一个大div中我都会用“width: 50%;display:inline-block;”这种方法来搞定，但是这样的写法很low,而且会经常有一种情况出现： 左边右边总有一个不能很好的对称 但是现在有简单一个方法，可以解决这个问题： 在最外层的view(div)中加“ display: flex; ” .free-all{ disp
如何让子组件，router-view，呈现左右分布格局
weixin_54048131的博客
08-07 263
1.用浮动进行浮动布局，定义一个大盒子，把浮动的样式写在公共样式里（这里在main.js里定义一下全局布局）。 2、能够在右边显示了
uni-app：多方法实现两个view在同一行展示（布局）
weixin_46001736的博客
09-26 6840
uni-app：实现两个view在同一行展示（布局）
左侧固定宽度，右侧自适应宽度的CSS布局
10-30
在现代网页设计中，实现一个侧边栏宽度固定，而主体内容宽度自适应的设计是一种常见需求。这种布局方式不仅能够提供稳定的视觉体验，还能提高页面的可用性和美观度。在实际应用中，尤其是在商务系统(Business System...
左定宽度右自适应宽度并且等高布局实现代码
09-25
1. 固定宽度与自适应宽度布局：文件中提到的“左侧固定宽度，右侧自适应屏幕宽度”的布局是一个常见的布局需求。实现这种布局通常有两种方法，第一种是使用浮动（float）来控制左侧元素固定宽度，并使用 margin-left...
利用负边距技术制作自适应宽度布局的网页
09-25
在网页设计中，自适应宽度布局是一种重要的设计理念，旨在确保网页在不同尺寸的设备上都能呈现良好的视觉效果和用户体验。负边距技术是实现这种布局的一种巧妙方法，尤其适用于流体布局，即页面元素随浏览器窗口大小...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
10-31
"固定右栏宽度, 左栏内容先出现同时自适应宽度的布局"是一种常见的网页设计模式，它允许右侧的内容保持固定的宽度，而左侧的内容则根据浏览器窗口大小自适应调整宽度。这种布局方式在各种类型网站中都有应用，例如...
h5学习笔记：flex space-between 实现左右对齐布局
热门推荐
夏天的树人的专栏
07-14 7万+
今天在尝试拼小程序界面的时候一直想换种口味。于是想使用flex布局，小程序支持flex也比较好。今天遇到一个问题就是要实现一个一左，一右，方式布局。之前习惯了用绝对布局的方式，可以将右边的元素实现right 0 处理。细心想了一既然使用flex布局肯定可以实现。找了一些资料看，space-between 在两个子元素下 可以实现左右对齐的效果。 下面，看一下实现。创建小程序页面，对文件编写如下的...
iOS编程 界面布局 纯代码 VFL编写和添加 左右两个view,按比例设置大小
woshidaniu的专栏
07-10 1264
// //  ViewController.m //  vfl-0710 // //  Created by tianshangrenjian on 15/7/10. //  Copyright © 2015年 tianshangrenjian. All rights reserved. // #import "ViewController.h
微信小程序|样式布局篇
Rookie1012的博客
12-29 6563
微信小程序|样式布局篇1、 小程序中的布局1.1 Flex布局特点1.2 Flex布局的应用关于利用justify-contenr属性的居中出现的问题1-创建titles数组，有多个tab标签。并使用wx:for="{{titles}}"遍历输出。2-设置整体为flex布局，并设置高度88rpx。1.3 Flex和block 1、 小程序中的布局 小程序的flex布局，即弹性盒子布局，可以比较容易的排列组件位置。 1.1 Flex布局特点 (1)任意方向的伸缩，向左，向右，向下，向上； (2)在样式层可以
微信小程序分类页面左右布局
weixin_48912846的博客
03-06 2223
<view class="container"> <view class="left"> <view class="item" {{activeIndex===index? 'active' : ''}}" wx:for="{{}}" wx:key="index" bindtap="clickType" data-i="{{index}}">111</view> </view> <view class="right"&g
左右布局：左边定宽、右边自适应
初漾的博客
06-15 3508
转自： http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html absolute + padding .example-1 { position: relative; height: 100px; width: 60%; padding-l
编程爱好者博客地带.zip
最新发布
08-23
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《编程爱好者博客地带》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
css判断不同分辨率显示不同宽度布局实现自适应宽度
05-15
为了实现不同分辨率下自适应宽度布局，我们可以利用CSS的@media查询来判断当前设备的分辨率从而设置不同的布局样式。 首先，我们需要设置一个基准的布局，比如说最大宽度为1200px的容器，以适配大部分设备。然后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值