关于html中的float布局问题
在body上设置了3个div，如下<divid="div_body"><divid="div_left"></div></divid="div_right"></div>...
在body上设置了3个div，如下
<div id="div_body">
<div id="div_left">
</div>
</div id="div_right">
</div>
</div>
请设置一下3个css文件，并使用float属性实现图片的内容，我主要还是看float如何设置的。
条件是 id为div_body的div的height（宽度，英语好像是这个吧？）为auto，其余两个的宽度不要求 展开
<div id="div_body">
<div id="div_left">
</div>
</div id="div_right">
</div>
</div>
请设置一下3个css文件，并使用float属性实现图片的内容，我主要还是看float如何设置的。
条件是 id为div_body的div的height（宽度，英语好像是这个吧？）为auto，其余两个的宽度不要求 展开
8个回答
展开全部
#div_body { margin: 0 auto; width: 960px; overflow: hidden; border: 1px solid #999;}//overflow主要解决此div内因左右浮动而引起的自身高度消失的问题，还有种就是加.clearfix的class
#div_left { float: left; width: 550px; height: 100px; border: 1px solid #ccc;}
#div_right { float: right; width: 400px; height: 100px; border: 1px solid #ccc;}
//下面俩个div的高度可不写，是自适应的，浮动内容一般最好写上宽度，不然会有想不到的bug.clearfix的样式
* html .clearfix {zoom: 1;}
zoom: 1; }
.clearfix:after {height: 0;visibility: hidden;content: ".";display: block;clear: both;}你的html代码有问题
<div id="div_body">
<div id="div_left"></div>
<div id="div_right"></div>//这排的第一个div不该有斜杠
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
*{
margin:0 auto;//使页面居中
padding:0px;
border:0;//可以减少那站内图片的边框
}//一般页面都要写的开场白
body {
margin:0 auto;
padding:0px;
}//一般页面都要写的开场白
#div_body{
clear:both;
width:100%;//一般页面的总大小个人建议用百分比，这样不管在那种分辩率的情况下影响都不会很大或没影响！
height:auto;
text-align:center;
}
#div_left{
float:left;
width:55%;//这是大小自己规划！但看你那图大概了一下百分比
margin:15px 0px 20px 10px;//外补丁的距离上、右、下、左的顺序
padding:0px;//内补丁为0
}
#div_right{
float:left;//这里可以是left也可以是right,但主要看你右边是不是没区块或是好设置了！
width:35%;
margin:15px 0px 20px 15px;//这是left的设置方法！（margin:15px 30px 20px 0px;//这是大概的距离设置！你可以按你的要求调整！）
padding:0px;
height:auto;
}
</style>
PS：个人建议（一般一个站或一个页面内！如没特别的样式或规定！一般一个页面只能有一个ID！）如果在这方面还有啥问题可以找我！大家交流交流！
*{
margin:0 auto;//使页面居中
padding:0px;
border:0;//可以减少那站内图片的边框
}//一般页面都要写的开场白
body {
margin:0 auto;
padding:0px;
}//一般页面都要写的开场白
#div_body{
clear:both;
width:100%;//一般页面的总大小个人建议用百分比，这样不管在那种分辩率的情况下影响都不会很大或没影响！
height:auto;
text-align:center;
}
#div_left{
float:left;
width:55%;//这是大小自己规划！但看你那图大概了一下百分比
margin:15px 0px 20px 10px;//外补丁的距离上、右、下、左的顺序
padding:0px;//内补丁为0
}
#div_right{
float:left;//这里可以是left也可以是right,但主要看你右边是不是没区块或是好设置了！
width:35%;
margin:15px 0px 20px 15px;//这是left的设置方法！（margin:15px 30px 20px 0px;//这是大概的距离设置！你可以按你的要求调整！）
padding:0px;
height:auto;
}
</style>
PS：个人建议（一般一个站或一个页面内！如没特别的样式或规定！一般一个页面只能有一个ID！）如果在这方面还有啥问题可以找我！大家交流交流！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div_body{
width:960px;
height:auto;
margin:0 auto;
border:1px solid #000;/*这里我设置了边框，方便查看效果*/
padding:10px 0;
}
#div_left{
width:660px;
height:500px;
border:1px solid #f00;
float:left;
}
#div_right{
width:288px;
height:300px;
border:1px solid #f00;
float:right;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="div_body">
<div id="div_left">这里是左侧的部分</div>
<div id="div_right">这里是右侧的部分</div>
<div class="clear"></div><!--清除浮动-->
</div>
</body>
</html>
自己看下效果吧！！
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
#div_body {
width:900px;
clear:both;
border:solid gray 1px;
height:auto; /*这个默认是0px的，你还是自己加上去*/
}
#div_lef t{
float:left;
width:440px;
margin-left:10px;
border:solid gray 1px;
}
#div_right {
float:left;
width:230px;
margin-right:10px;
border:solid gray 1px;
}
</style>
<div id="div_body">
<div id="div_left">
</div>
<div id="div_right">
</div>
</div>
原题中div写错了
#div_body {
width:900px;
clear:both;
border:solid gray 1px;
height:auto; /*这个默认是0px的，你还是自己加上去*/
}
#div_lef t{
float:left;
width:440px;
margin-left:10px;
border:solid gray 1px;
}
#div_right {
float:left;
width:230px;
margin-right:10px;
border:solid gray 1px;
}
</style>
<div id="div_body">
<div id="div_left">
</div>
<div id="div_right">
</div>
</div>
原题中div写错了
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
#div_body {
border: 1px solid #000000;
padding:10px;
overflow:hidden;
width:280px;
}
#div_left{
float:left;
width:100px;
height:200px;
border: 1px solid #000000;
}
#div_right {
float:left;
width:150px;
height:200px;
margin-left:10px;
border: 1px solid #000000;
}
</style>
<div id="div_body">
<div id="div_left">
</div>
<div id="div_right">
</div>
</div>
望采纳，要分用。。
#div_body {
border: 1px solid #000000;
padding:10px;
overflow:hidden;
width:280px;
}
#div_left{
float:left;
width:100px;
height:200px;
border: 1px solid #000000;
}
#div_right {
float:left;
width:150px;
height:200px;
margin-left:10px;
border: 1px solid #000000;
}
</style>
<div id="div_body">
<div id="div_left">
</div>
<div id="div_right">
</div>
</div>
望采纳，要分用。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
