Html 为什么我不能有2个iFrame并排，总宽度为100%？_Html_Css_Iframe

Html 为什么我不能有2个iFrame并排，总宽度为100%？

html css iframe

Html 为什么我不能有2个iFrame并排，总宽度为100%？,html,css,iframe,Html,Css,Iframe,我总共有4个iframe <body> <iframe id="top_frame" src=""></iframe> <iframe id="left_frame" src=""></iframe> <iframe id="right_frame" src=""></iframe> <iframe id="bottom_frame" src=""></ifram

我总共有4个

iframe

<body>
    <iframe id="top_frame" src=""></iframe>
    <iframe id="left_frame" src=""></iframe>
    <iframe id="right_frame" src=""></iframe>
    <iframe id="bottom_frame" src=""></iframe>
</body>

但是它没有像您在这个JSFIDLE中看到的那样工作

如果我将

right\u frame

的宽度减小到73%，则它们将并排显示，但会在右侧留下位空间

这是什么原因

我怎么能有两个iFrame并排，总宽度为100%？

首先，你需要告诉

左框和右框，你希望它们彼此相邻
您可以使用几种不同的方法来实现这一点，但最流行的方法之一是浮动它们：
#left_frame,
#right_frame {
    float: left;
}

现在，这是可行的，但你仍然看不到它们挨在一起。
这是因为默认情况下它们有一个固有的2px边框
因此，您可以删除边框：
#left_frame,
#right_frame {
    float: left;
    border: none;
}

或者，可以从宽度中减去边框。我推荐这个
#left_frame,
#right_frame {
    float: left;
}

#left_frame {
    width: calc(25% - 4px);
}

#right_frame {
    width: calc(75% - 4px);
}

链接到您更新的小提琴：
编辑-正如@Rob Scott所指出的，您可以添加框大小：边框框到iFrame，不必使用calc
语句。这看起来像：
#left_frame,
#right_frame {
    float: left;
}

iframe {
    box-sizing: border-box;
}

更新了fiddle，以解决右\u帧右侧的间距问题
对HTML和CSS进行一些更改，您就可以通过使用带有一些div的tabledisplay
样式来实现这一点

您也可以使用表本身来完成此操作。
默认情况下，iFrame上有一个2px边框，该边框不包括在框的宽度中。您可以使用css使用边框：0px
删除此边框，或者使用“框大小：边框框；”将其包含在宽度计算中正如罗布·斯科特所提到的。这将允许您将其宽度添加到100%。可以将它们并排放置，只需向左浮动一个

CSS:
要回答您的实际问题，即为什么：
即使没有边界，两个iFrame之间仍然有一个空间。25%+75%+4个边框+空间大小将超过100%，因此第二个边框必须换行
现在最简单的方法，也是最不可能对你造成严重破坏或崩溃的方法，就是使用，这是一种非常灵活的方法，可以在一行或一列中填充一些盒子：

浏览器支持相当不错，但在IE6上不起作用。
或者只使用框大小：边框框@RobScott真的！他也可以这样做，不必使用calc语句。@AlexWright@RobScott谢谢你的回答，但我可以看到右框
的右侧还有一些空间，即右框
的右边框与上框
和下框
的右边框不对齐。这意味着left\u frame
+right\u frame
的总宽度仍然不是100%。为什么？@srh如果您使用我在上面发布的@RobScott推荐的方法，您将不会在right\u帧的右侧留下任何空间。空格是由边框宽度的默认间距造成的。@srh我包含了一个链接，指向一个更新的提琴，该提琴使用框大小来解决间距问题。谢谢您的回答，但我可以看到right_框架
的右侧还有一些空格，即right_框架
的右边框与右侧不对齐顶部框架
和底部框架
的边框。这意味着left\u frame
+right\u frame
的总宽度仍然不是100%。为什么？顶部框架和底部框架设置为100%显示其内容，不包括边框。我更新了示例，将所有iFrame设置为在其宽度计算中包含边框。现在它们的总和达到100%。请参见框大小属性。默认值为“仅内容”。它起作用了。在JSFIDLE中，您使用的是justify content:space-between用于#中间一排
那是干什么用的？如果我去掉它，我看不到任何变化。某种习惯的力量<代码>调整内容说明如何处理剩余空间；默认是将所有的东西聚集在中间，但是<>代码>之间的代码>空间将在所有项目之间均匀地分散空间。
#left_frame,
#right_frame {
    float: left;
}

iframe {
    box-sizing: border-box;
}

<body>
    <iframe id="top_frame" src=""></iframe>
    <div class="cols">
        <div class="col-left">
            <iframe id="left_frame" src=""></iframe>
        </div>
        <div class="col-right">
            <iframe id="right_frame" src=""></iframe>
        </div>
    </div>
    <iframe id="bottom_frame" src=""></iframe>
</body>

#top_frame {
    width: 100%;
}
#left_frame {
    width: 100%;
}
#right_frame {
    width: 100%;
}
#bottom_frame {
    width: 100%;
}

.cols {
    display: table-row;
}

.col-left, .col-right {
    display: table-cell;
}

.col-left {
     width: 25%;   
}

.col-right {
     width: 75%;   
}

#top_frame {
    width: 100%;
}
#left_frame {
    float: left;
    width: 25%;
}
#right_frame {
    width: 75%;
}
#bottom_frame {
    width: 100%;
}
iframe {    
    box-sizing: border-box;
}

<iframe id="top_frame" src=""></iframe>
<div id="middle-row">
    <iframe id="left_frame" src=""></iframe>
    <iframe id="right_frame" src=""></iframe>
</div>
<iframe id="bottom_frame" src=""></iframe>

iframe {
    box-sizing: border-box;
}
#middle-row {
    display: flex;
}