黑马程序员技术交流社区

标题: 怎么把下面的dvi 自动补到上面的空缺处去 [打印本页]
作者: 颜小飞    时间: 2012-1-7 10:57
标题: 怎么把下面的dvi 自动补到上面的空缺处去
本帖最后由 颜小飞 于 2012-1-10 20:13 编辑

<!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>div+css学习</title>
<style type="text/css">
  #top{
          
          height:200px;
          width:100%;
          }
  #bodycontent{
          width:100%;
          height:600px;
          }
  #foot{
          height:150px;
          width:100%;
         }
  *{
          margin:0px;
          padding:0px;
          border:none;
          }
#all{
        width:1000px;
        height:auto;}
.top{
       
        width:1000px;
        height:150px;
}
/*下面这两个css样式有时要相互更换*/
.flashShow{
        width:1000px;
        height:300px;
}
.companyinfo
{
        float:left;
        width:650px;
        height:300px;
}
</style>
</head>

<body>
<center>
    <div id="all">
      <div id="top">
      <!--这里是头部不用改变的--->
        <iframe name="top" class="top" src="top.html"></iframe>
      </div>
      <div id="bodycontent">
      <div id="bodyiframe" class="companyinfo">
      <!---这里是要添加的一个子页面，这个页面内容有时会占全部宽度，有时只会占60%左右的宽度。如果只占60%宽度时，
      我希望下面右边的那个DIV（id="right"）自动补起到这个旁边的空缺处来。如果为1000px时就把div(id="right")给挤下去。怎么写
      css样式。求高手赐教。--->
        <iframe src="flash.html" name="view_body" id="view_body" class="companyinfo"></iframe>
      </div>
        <div id="left" style="background-color:yellow; width:650px; float:left; height:300px;">
        </div>
        <div id="right" style="float:right; width:340px; height:300px; background:blue;"></div>
      </div>
      <div id="foot" >
        <iframe src="foot.html" style="width:1000px; height:150px; border:none;" ></iframe>
      </div>
      
    </div>
</center>
</body>
</html>
作者: 罗利民    时间: 2012-1-7 20:18
最简单的方法就是：
将这两句换个位置
<div id="left" style="background-color:yellow; width:650px; float:left; height:300px;">
        </div>
        <div id="right" style="float:right; width:340px; height:300px; background:blue;"></div>
换成
<div id="right" style="float:right; width:340px; height:300px; background:blue;"></div>
<div id="left" style="background-color:yellow; width:650px; float:left; height:300px;">
        </div>
这样就行了

作者: 颜小飞    时间: 2012-1-7 21:41
罗利民 发表于 2012-1-7 20:18
最简单的方法就是：
将这两句换个位置

这样不行，当前面这个Div的宽度为100%，就会造成div ="left"的这个层挤到下面去。而div ="right"的左边空着的现像。我用position的属性已经解决了。谢谢你！
作者: 罗利民    时间: 2012-1-8 00:06
你的意思现在你能实现
<div id="bodycontent">
      <div id="bodyiframe" class="companyinfo">
      <!---这里是要添加的一个子页面，这个页面内容有时会占全部宽度，有时只会占60%左右的宽度。如果只占60%宽度时，
      我希望下面右边的那个DIV（id="right"）自动补起到这个旁边的空缺处来。如果为1000px时就把div(id="right")给挤下去。怎么写
      css样式。求高手赐教。--->
        <iframe src="flash.html" name="view_body" id="view_body" class="companyinfo"></iframe>
      </div>
        <div id="left" style="background-color:yellow; width:650px; float:left; height:300px;">
        </div>
        <div id="right" style="float:right; width:340px; height:300px; background:blue;"></div>
      </div>

这3个div在同行？？？

不会把
你整体的宽度才1000
第一个框架就款650
然后left的那个div也宽650  第二个就肯定要到下面了



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2