div如何包不住iframe-HTML教程-爱易网页

div如何包不住iframe

日期：2014-05-17　浏览次数：20656 次

div怎么包不住iframe
DIV中定义了个iframe框架，我把iframe的宽度定义为100%，外边距定义为10px,但就是包不住。

HTML code


#frame_right {
    float: left;
    height: 503px;
    width: 790px;
    margin-top: 10px;
    background-image: url(../image/right.gif);
    margin-right: px;
    border: 1px solid red;
}
#frame {
    height: 483px;
    width: 100%;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid blue;
}
<div id="frame_right" style="width: 790px;"><iframe id="frame"></iframe></div>

------解决方案--------------------
width: 97%;
------解决方案--------------------
我才疏学浅啊但是个人在你的样式表里没有看到任何父子关系。觉得应该跟这个有关系。
------解决方案--------------------
<!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">
.frame_right {
float: left;
height: 503px;
width: 790px;
margin-top: 10px;
background-image: url(../image/right.gif);
margin-right: px;
border: 1px solid red;
}
.frame_right .frame {
height: 483px;
width: 100%;
border: 1px solid blue;
}
</style>
</head>

<body>
<div class="frame_right" style="width: 790px;"><iframe class="frame"></iframe></div>
</body>
</html>

width已经100%了，在margin:10px; 会出边界。
如果一定要DIV包住IFRAME并且有边框有空隙，可以考虑给DIV加padding，取消DIV的width和height

<style type="text/css">
.frame_right {
float: left;
margin-top: 10px;
background-image: url(../image/right.gif);
margin-right: px;
border: 1px solid red;
padding:10px;
}
.frame_right .frame {
height: 483px;
width: 100%;
border: 1px solid blue;
}
</style>
------解决方案--------------------
width是内容的大小，不是整个iframe容器的大小，iframe容器包括内容，padding 和margin。

在ie中应该可以。ie的width是整个容器的大小
------解决方案--------------------
超出主要是看你对iframe控制是多大,还有就是应用的页面有多大.
------解决方案--------------------
margin-right: px; 读到这里读不下去的。
------解决方案--------------------

CSS code


 #frame {
        height: 483px;
        width: 100%;//把这里的 百分比调小就可以 因为你margin 占用的一定的宽度 
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        border: 1px solid blue;
    }

------解决方案--------------------
CSS code

#frame_right {
    float: left;
    height: 503px;
    width: 790px;
    margin-top: 10px;
    background-image: url(../image/right.gif);
    margin-right: px;
    border: 1px solid red;
    padding：10px;
}
#frame {
    height: 100%;
    width: 100%;
    border: 1px solid blue;
}

------解决方案--------------------
原因就是：
你有边框border,还有margin间距
你居然还要求他占总格的百分百width:100%
这就是要求你离墙三米远，必且用手摸着他！
光有边框他就受不了了，就会冒出来
可以多测试几下，把margin padding 都去掉
另外frame默认有边框，可设为border:none;background:red;来测试

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

div如何包不住iframe

相关资料更多>

推荐阅读更多>