两个div左边的固定宽度,右边的自动填满

最新推荐文章于 2020-12-21 04:20:07 发布
最新推荐文章于 2020-12-21 04:20:07 发布
阅读量640 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lelong2002huyao/article/details/10002351
版权 
<div id="main" style="width:98%;">
        <div id="left" style="float:left;width:200px;border:1px solid red;height:100px;">
        </div>
        <div id="right" style="height:100px;border:1px solid blue;width:auto;margin-left:200px;">
        </div>
</div>

lelong2002huyao
关注
专栏目录
两列布局：左边固定右边自适应
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，让
两个div左边的固定宽度右边的自动填充的css
09-25
想实现这样的一个效果两个div左边的宽度固定、右边的自动填满，实现方法很简单，下面为大家简单介绍下，感兴趣的朋友可以参考下
css布局实现：左侧固定，右侧占满剩余的全部
u012183426的博客
11-26 6233
.left{         width:210px;         float:left;     }     .right{         margin-left:210px;     } ........................................................................................
控制一个DIV内所有图片宽度超出后自动调整为指定大小
08-27
直接通过CSS控制一个DIV内所有图片宽度超过650PX时.自定为650PX;高度自适应! 些CSS代码是目前最简单有效的自动调整图片尺寸的方法,且兼容IE6 IE7 IE8 和FF等版本的浏览器
CSS浮动一：div基本介绍（背景色，大小，坐标位置，溢出处理，outline，border边框）
小枯林的博客
12-21 1544
CSS浮动： ●用于页面布局和美化； ●注意看其具体的效果；多练习，观察效果 都是 水电费 什么是div： ●DIV是层叠样式表中的定位技术，全称为DIVision； ●有的时候，把div称为图层，更多的时候称之为“块”； DVI样式设置： ●div大小，背景设置； ●div溢出（div是个容器，里面可以存放各种类型的内容，比如图片文字段落等，如果内容太多超出了div大小就叫溢出；溢出...
两个div水平铺满
聂培志的博客
01-28 597
之前面试遇到过一个笔试题，大概意思： 页面有两个水平对齐的div，其中一个宽为100px,另一个根据浏览器窗口自动铺满 有两个办法可以实现，css3中的calc计算和flex布局 calc计算 右侧div的width = 父元素的宽度 - 100px 代码如下 <div class="container"> <div class="fix"></div&g...
设置一个div层的最小宽度或最小高度
12-04
如果内容不足以填满这个宽度，`div`将会收缩至其内容的实际宽度。 结合使用`min-width`和`max-width`： 在某些情况下，我们可能需要同时设定最小和最大宽度，以确保元素在特定范围内保持尺寸的可控性。例如，一个...
css实现div填充剩余高度 高度自适应
沙漠面包的博客
12-14 2155
 利用父元素的padding-top 和 头部div的margin-top(为负) 搭配巧妙的实现，代码如下： HTML代码：  &lt;div class="father"&gt; &lt;div class="header"&gt;header&lt;/div&gt; &lt;div class="content"&gt;content&lt;/div
DIV+CSS 实现自适应高度, 自适应宽度
config20140103的博客
08-07 103
网上查了很多资料都没找到答案,只找了一篇相关的,还是自己来做一做,^_^通常我们做DIV布局时都会按照table的布局来做,这是一种定向思维,下面以三横三列DIV+CSS布局来做实例table布局:1 2 34 5 67...
css中div高度自适应且固定剩余高度由另外div内容填充
菜鸡奋斗ing的博客
11-29 4975
最近做个页面设计，头部是搜索框以及过滤按钮那些，而剩余高度内容则是列表内容用来显示过滤后的内容。在移动设备显示头部内容会随屏幕大小而改变，所以不能把高度设定死，但剩余部高度又要显示列表内容。构思是头部有一部分的高度随着内容的变化而变化，但这头部是固定的fiexd。剩余部分是列表高度。每次试验发现都虽说下面列表有接在头部位置下面但是当页面往上拉时列表内容会跑到头部内容的下一层去。 一次意外嵌套的尝试
div height 自适应高度 占满剩余高度的方法
weixin_30550081的博客
09-11 488
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { mar...
让div填满剩下的空间
小仙女的博客
07-18 1万+
让div填满剩下的空间  方案一  一 如果parent是body  div2{ position:fixed; top:hpx; bottom:0; } 二 如果parent是div .parent{ position:relative; } .div2{ position:absolute; top:hpx; botto...
DIV撑满父容器剩余高度
u012007592的博客
03-22 1万+
页面框架关系如下图：如果使“用户组织”任务区的页面内部的DIV能够自动撑满显示区高度，需要将“外层DIV”的高度设为100%，height:100%，但是这个100%是相对于父级元素的高度而定的，如果父级元素的高度不确定，这个100%是不起作用的，也就是说，外层div的所有父级页面的高度都要设置，有值，才能起作用，所以“外层DIV”所在页面的html和body要设置高度，可以用百分比设置，ht...
两个div一个固定宽度，另一个填充满窗口
jpjp2020的博客
08-02 1919
  使用弹性布局实现两个div其中一个固定宽度，另一个填充满窗口 .div-box { display: flex; height: 100px; line-height: 100px; background: pink; text-align: center; } .div1 { width: 100px; height:...
css实现两个div填满一行
热门推荐
YinghaoGuo的博客
06-06 3万+
有如下代码： body{ width: 100%; height: 100%; padding: 0; margin: 0; position: absolute; } #main{ width: 800px; ...
左侧固定 右侧自适应三种方法
weixin_34296641的博客
07-24 164
第一种：float 单一层浮动法 例如：左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px; 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...
el-table填满宽度
最新发布
10-09
要使 el-table 填满宽度，你可以使用 CSS 来设置其宽度为100%。以下是一个示例代码： ```html <template> <div> <el-table :data="tableData" style="width: 100%" > <!-- 表格列 --> </el-table> </div> </template> ``` 在上述代码中，我们设置了 el-table 的样式为 `width: 100%`，这将使其水平方向填满父容器的宽度。 希望这可以帮助到你！如果你有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值