css 左边固定宽度，右边自动填充的布局，不用flex

最新推荐文章于 2023-02-02 13:33:08 发布
最新推荐文章于 2023-02-02 13:33:08 发布
阅读量703 收藏
点赞数
分类专栏： css

<div class="left"></div>

<div class="right"></div>

 

<style>

.left{

position: relative;float: left;width:200px;

}

.right{

position: relative;overflow: hidden;

}

 

</style>

yezitoo
关注
专栏目录
不使用flex，实现高度height自适应
qinleo6的博客
06-30 810
<table class="container"> <tbody> <tr style="height: 1px;"> <td> <div class="show"> <div>1</div> <div>1</div> <div>1</div> <di.
css常用布局
最新发布
qq_65727637的博客
09-06 338
给父元素添加BFC后，三个子元素与父元素边界margin合并问题解决了。但子元素之间仍有margin合并问题，因为同一BFC的相邻元素会margin合并。因此，另一种解决方法是给子元素添加BFC，这样，父元素处于html根标签这个BFC中，三个子元素分别是三个BFC。BFC（Block Formatting Context）块级格式化上下文，相当于一块独立的渲染区域，有自己的渲染规则。父元素未设置高度，其高度本应该由子元素撑开，但子元素设置了浮动，脱离了文档流，所以父元素高度变为0。
不采用 flex，实现两端对齐布局
weixin_34129145的博客
09-20 555
2019独角兽企业重金招聘Python工程师标准>>> ...
css3宽度变大动画_不使用css3:flex怎么实现一些常见的移动端布局
weixin_40003478的博客
11-21 452
在外企银行工作，开发的app是混合应用。说实话国外银行功能确实没有国内银行多，而且技术比较守旧，就在去年上半年，没错，2018年上半年，我们的app还必须兼容安卓4.4，并且测试还会旧设备去测，这让我们不得不放弃css3。好在页面少，工作量不算太大。而且幸运的是，去年下半年公司app的webview外壳升级，终于可以用上css3。虽然以前写的css虽然看起来很愚笨，但是确实在任何设备都没有兼容性问...
CSDN图片居中、左对齐、右对齐、大小设置
qq_42224089的博客
02-02 2180
在撰写CSDN博文时，经常需要对图片进行居中、左对齐、右对齐处理或者是修改图片的大小，进行等比例缩放或者是非等比例缩放
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间，或缩小它们以防止溢出容器。 任何...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
css3 flex布局实现平均分配元素的示例代码
11-20
在CSS3中，Flex布局（Flexible Box）是一种强大的布局模型，用于处理复杂的网页布局问题，尤其是在响应式设计中。它允许开发者更容易地控制容器内的子元素的排列、对齐和大小调整。本篇文章将深入探讨如何使用Flex...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
例如，通过设置左右两个div为固定宽度并浮动，中间的div则自动填充剩余的空间。 然而，今天的主题是中间栏固定宽度，两边栏自适应宽度。这种布局适用于某些场景，比如中间栏需要保持特定宽度以展示固定内容，而两侧...
flex布局，左边固定宽度
08-29
你可以通过使用 Flex 布局的 `flex-basis` 属性来实现左边固定宽度。`flex-basis` 属性用于指定元素在主轴上的初始大小。 下面是一个示例代码： ```html 左边固定宽度 右边自适应宽度 ``` ```css .container ...
详解css3 flex弹性盒自动铺满写法
11-19
本文主要介绍了详解css3 flex弹性盒自动铺满写法，分享给大家，具体如下：
flex 布局 左侧固定右侧自适应 超出内容隐藏，并保证布局效果
王博的博客
05-28 3693
效果图： 注意点： 当右侧设置文本超出隐藏后，会影响整体页面布局，只需为右侧添加min-width数据即可。 代码：以下是代码 <template> <div class="main-view"> <div class="left-view">这是左侧</div> <div class="right-view"> <div class="text-overflow-ellipsis">{{ .
前端面试高频题：实现左右宽度固定宽度，中间自适应的三栏布局
cxz
08-07 234
面试高频题实现：定高100px，左右宽度均为200px，中间自适应。 1、浮动—float <style> .wrap > div {height: 200px; text-align: center; line-height: 200px; } .float .left { width: 200px; float: left; background-color: #f00; } .float .center { b
html 自动填充宽度,css左右侧自动填充宽度布局
weixin_39815943的博客
05-31 716
无标题文档#div2{float:left;margin-left:-100%;}#div3{float:left;width:100%;}22222f22222f22222f22222f22222f22222f22222f22222f11111F11111F11111F11111F11111F11111F11111F11111F11111F11111F11111Fcss经典布局之左侧固定大小右侧...
css实现左侧定宽盒子右边不定宽盒子占满
qq_40816649的博客
10-18 1159
方法一、浮动 左： float:left;width: 200px; 右： margin-left: 200px; 方法二、flex布局 父： display: flex; 左： width: 200px; 右： flex: 1; 方法三、position定位 父： position: relative; 左： width: 200px;display...
使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面
刘悦的技术博客
04-30 1711
目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，本人在微信小程序页面中尝试了一下弹性布局，个人感觉是：简直太好用了。我们知道，写习惯了前端的人，一般切图后布局页面的话，上手最习惯的是基于盒子模型的浮动布局，依赖 display 属性 + position属性 + float属性，但是浮动布局有一些致命的小问题，比如垂直居中比较费劲，比如著名的。说了这么多，都是理论，我们来用弹性布局实战一下，比如我们要模仿瑞辛咖啡小程序中的，首行单列，换行双列，并且自适应整个手机页面的布局。
CSS小技巧——flex实现元素位置自动更新
shandamengcheng的博客
04-28 579
今天在写项目的时候，在思考怎么实现把一个图片列表中的点击过的图片隐藏之后，在其下面的图片位置自动更新，后来想到了flex这个神奇的CSS属性。 flex + 最大/最小宽高度 先来看一个简单的代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/...
微信小程序-flex布局：垂直、水平方向-自动填充满剩余空间
热门推荐
l_yilan的博客
05-13 2万+
flex布局
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值