css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

【css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法】的更多相关文章

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left">Left sidebar</div> <div id="content">Main Content</div> CSS Code <style type="text/css"> *{ margin:; paddi…

CSS自适应布局(左右固定中间自适应或者右侧固定左侧自适应)

经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局右侧固定宽度左侧自适应或者三列布局左右固定中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右侧固定宽度左侧自适应第一种方法:左侧用margin-right,右侧float:right 就可以实现. HTML代码可以如下写: <div class="box-left"> <a href="" target=&q…

HTML5结合CSS的三种方法+结合JS的三种方法

HTML5+CSS: HTML中应用CSS的三种方法一.内联内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red">text</p> 这将会是指定的段落变成红色.我们的建议是,HTML应该是独立的.样式自由的文档,所以内联样式无论在什么情况下都应该尽量避免. 二.内部内部样式服务于整个当前页面.在头标签head里面,样式标签style里包含当前页面的所有样式. 示例代码 <!DOCTYPEhtm…

你不知道的css高级应用三种方法——实现多行省略

前言这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正是从那么多千篇一律的文章中跳转过来的,想找更好地方案的.那恭喜你,没有更好的,只有更合不合适的,当然,前提是我的文章流量够多,能被顶上去你才有机会看到. 这里介绍三种多行文本截断的方法,当然第一种就是你看到想吐的-webkit-line-clamp方案,不想看就直接跳到第二种方法开始看啦. 使用-w…

CSS围住浮动元素的三种方法

浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2.同时浮动父元素 3.添加清除浮动元素. 1.父元素overflow:hidden overflow:hidden的真正作用是防止元素被超大内容撑大.使用hidden后,元素保持其设定的高宽,超大的内容会被“剪切”掉,变为页面不可见部分.同时,overflow:hidden也能强迫父元素包围浮动子元素…

css - 三种方法解决LI和内部Img的上下间距问题

在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和img依旧不能重合.虽然肉眼看不出来. 解决这个问题有如下三种方法: 一.设置li的font-size:0: 如果你很幸运,布局中li里边不需要放文字的话,那么就可以这么用了. 二.设置img的vertical-align:去掉集成的样式或者覆盖设置为top 在我这里出现这个问题,是因为img继承了公用…

为IE单独写CSS的三种方法

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此,在进行页面开发时不免要为 IE 单独写一些 CSS .熟悉的方法有 IE hacks 和条件注释 CSS(Conditional Stylesheets),下面,不妨讨论一下这两种方法的优缺点. IE hacks 举个例子,一个元素在其他浏览中的左边距是 30px ,而在 IE6 中则设置为 20p…