html5+css 两列布局

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>两列布局</title><style type="text/css">body{margin:0;padding:0;}.main{width:555px;height:333px;margin:0 auto;}.left{width:20%;height:200px;background:red;float:left;}.right{width:80%;height:300px;background:blue;float:right;  /*此处float：right不写的话，就会有20%的区域被left覆盖掉；*/}</style>
</head>
<body><div class="main"><div class="left"></div><div class="right"></div></div>
</body>
</html>

html5+css 两列布局相关推荐

两列布局 html5,CSS两列布局的N种实现
原理:两个元素都设置dislpay:inline-block,为了消除html空格的影响,父元素的font-size需要设置为0,右侧自适应元素的宽度使用calc函数计算.如果两个元素的高度不一样,可 ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
html5+css 三列布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
CSS 两列布局之左侧适应，右侧固定 3种方式
第一种:左侧用margin-right,右侧float:right CSS代码: html,body,ul,li#wrapper {width: 100%;height: 100%;padding: ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
八十八、CSS两列三列的布局方式
@Author:Runsen 2020/11/30. 周一.今天又是奋斗的一天. 文章目录两列布局左边定宽 ,右边自适应弹性布局,flex实现表格方式三列布局左边左浮右边浮动中间定宽 ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
CSS布局之两列布局
两列布局两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...

html5+css 两列布局

html5+css 两列布局相关推荐

最新文章

热门文章