UC知道CSS+div三行两列布局
来源：百度知道 编辑：UC知道 时间：2024/06/23 01:35:53
小弟分数不够.希望打下们能帮帮我!
顶部和底部就省略了 直接把两列的代码发上来
右边那块不能和左边那块在同一条线上 他们的位置刚好是左边那块的高度!!
<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:#0
顶部和底部就省略了 直接把两列的代码发上来
右边那块不能和左边那块在同一条线上 他们的位置刚好是左边那块的高度!!
<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:#0
float 少一个 </div>
复制下面的代码试试！
<!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;
}
.clear{clear:both}
--