CSS+div三行两列布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS+div三行两列布局相关的知识，希望对你有一定的参考价值。
小弟分数不够.希望打下们能帮帮我!
顶部和底部就省略了 直接把两列的代码发上来
右边那块不能和左边那块在同一条线上 他们的位置刚好是左边那块的高度!!
<div id="main">
<div id="left_m">
<p>this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!</p>
</div>
<div id="right_m"><p>this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!</p>
</div>
<div class="clear"></div>
CSS:
#main
width:780px;
height:700px;
background-color:#333333;
#left_m
width:400px;
floar:left;
background-color:#0000FF;
#right_m
width:350px;
background-color:#FF3300;
float:right;
.clearclear:both
你所说的那个把right里面的浮动改成 left我试过
但是它回自动对齐到left_m的 下面!!
不知道那里出错了!
复制下面的代码试试！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#main
width:780px;
height:700px;
background-color:#333333;
#left_m
width:400px;
background-color:#0000FF;
float: left;
#right_m
width:350px;
background-color:#FF3300;
float:right;
.clearclear:both
-->
</style>
</head>
<body>
<div id="main">
<div id="left_m">
<p>this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!</p>
</div>
<div id="right_m"><p>this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!this is word!</p>
</div>
</div>
</body>
</html> 参考技术A 我看得到的你这里就有2个问题，一个就是布局，mian的图层没有结束！另外一个就是你写#left_m样式的时候，把float写成floar,我换了这2个问题，页面就没有什么问题了！呵呵，如果还有问题就说来看看吧！ 参考技术B right里面应该还写float:left，而不是float:right. 参考技术C float写成floar了 参考技术D clear:both
自己试试吧，印象深
CSS两列布局的多种方式
参考技术A 两列布局（一侧固定宽度，一侧自适应），在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。修改 css 就可实现 位置调换 ，如下：
优点 ： 交换 <div class="sidebar">固定</div> 、 <div class="main">自适应</div> 顺序 ，实现主要内容优先加载渲染。
缺点 ：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住下面的元素。需要给父盒子设置 overflow 属性。
也支持位置调换：
缺点 ：不能实现主要内容优先加载渲染。
位置调换：
这里有一点需要注意： .sidebar 没有设置高度，会和 .container 保持一样的高度。 .container 的高度是被 .main 撑开的，也就是和 .main 高度一样。
位置调换：
这里 .main 和 .sidebar 高度不单独设置的话，也是同样的高度。
位置调换：
位置调换：
这里让 .main 成为 BFC 主要是消除 .sidebar 因 float 带来的影响，只要能让 .main 成为 BFC 就行。
此外留给大家一个思考题，还有没有其他方式呢？
以上是关于CSS+div三行两列布局的主要内容，如果未能解决你的问题，请参考以下文章
用div+css 制布局设计 三行 第二行分成两列 需要生成两个文件
div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做
div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做