CSS+div三行两列布局
小弟分数不够.希望打下们能帮帮我!顶部和底部就省略了直接把两列的代码发上来右边那块不能和左边那块在同一条线上他们的位置刚好是左边那块的高度!!<divid="main">...
小弟分数不够.希望打下们能帮帮我!
顶部和底部就省略了 直接把两列的代码发上来
右边那块不能和左边那块在同一条线上 他们的位置刚好是左边那块的高度!!
<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;}
.clear{clear:both}
你所说的那个把right里面的浮动改成 left我试过
但是它回自动对齐到left_m的 下面!!
不知道那里出错了! 展开
顶部和底部就省略了 直接把两列的代码发上来
右边那块不能和左边那块在同一条线上 他们的位置刚好是左边那块的高度!!
<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;}
.clear{clear:both}
你所说的那个把right里面的浮动改成 left我试过
但是它回自动对齐到left_m的 下面!!
不知道那里出错了! 展开
5个回答
展开全部
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}
-->
</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>
复制下面的代码试试！
<!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}
-->
</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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我看得到的你这里就有2个问题，一个就是布局，mian的图层没有结束！另外一个就是你写#left_m样式的时候，把float写成floar,我换了这2个问题，页面就没有什么问题了！呵呵，如果还有问题就说来看看吧！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
right里面应该还写float:left，而不是float:right.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
clear:both
自己试试吧，印象深
自己试试吧，印象深
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
