左侧宽度固定，右侧宽度自适应-----两种布局样式

下面是两种布局方式

html

<div class="t1"><div class="one">1</div><div class="two">2</div>
</div>

css1样式布局1

.one{
　　float:left;
　　width:300px;
　　height:200px;
　　background-color: pink;
}
.two{
　　margin-left: 300px;
　　height:200px;
　　background-color: #f40;
}

css2样式布局2

.one{position:absolute;width:300px;height:200px;background-color: pink;
}
.two{margin-left: 300px;height:200px;background-color: #f40;
}

转载于:https://www.cnblogs.com/zwp06/p/7477446.html

左侧宽度固定，右侧宽度自适应-----两种布局样式相关推荐

html 左边固定右边自动,七种实现左侧固定，右侧自适应两栏布局的方法
总结一下左边固定,右边自适应的两栏布局的七种方法.其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点.关于 ...
七种实现左侧固定，右侧自适应两栏布局的方法
总结一下左边固定,右边自适应的两栏布局的七种方法.其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点.关于 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
移动Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
数学-矩阵计算（4）两种布局
之前会发现在有的求导上最后结果需要转置,而有的不需要,很困惑,然后才发现了这个维基上面的解释(这才是写该博文的主要价值,注意到不同的布局问题,其他部分只是为了完整性而写的),而且下面也有很多很不错的参 ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...

左侧宽度固定，右侧宽度自适应-----两种布局样式

左侧宽度固定，右侧宽度自适应-----两种布局样式相关推荐

最新文章

热门文章