Question

我总共有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>

我希望其中2个left_frame和right_frame并排，总宽度为100％（left_frame为25％，right_frame为75％）。

所以我把这个CSS：

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

但它在你的JSFiddle http://jsfiddle.net/srhcan/mwg3j17d/1/

中看不到

如果我将right_frame的宽度减小到73％，那么它们会并排显示，但会在右侧留下位空间。

这是什么原因？

如何将2个iframe并排放置，总宽度为100％？

Answer 1

首先，您需要告诉#left_frame和#right_frame您希望它们彼此相邻。

你可以通过几种不同的方式做到这一点，但最受欢迎的方法之一是浮动它们：

#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);
}

链接到您更新的小提琴：http://jsfiddle.net/mwg3j17d/4/

编辑 - 正如@Rob Scott指出的那样，您可以将box-sizing: border-box;添加到iframe中，而不必使用calc语句。那看起来像是：

#left_frame,
#right_frame {
    float: left;
}

iframe {
    box-sizing: border-box;
}

更新小提示以修复right_frame右侧的间距问题 http://jsfiddle.net/mwg3j17d/12/

Answer 2

您的iframe默认情况下有2px边框，不包含在框的宽度中。您可以使用border: 0px使用css删除此边框，或使用`box-sizing：border-box;'将其包含在宽度计算中。正如Rob Scott所说。这将允许您将其宽度添加到100％。可以左右浮动，将它们并排放置。

<强> Updated Fiddle

CSS：

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

Answer 3

回答 why ：

的实际问题

即使没有边框，两个iframe之间仍然有空格。 25％+ 75％+四个边框+空间大小将超过100％，因此第二个必须换行到新线。

现在最简单的方法就是使用flexbox，这是一种非常灵活的方法，可以连续填充一定数量的盒子，或者是最不可能对你造成严重破坏的方式。柱：

http://jsfiddle.net/mwg3j17d/10/

<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;
}

浏览器支持非常好，但它不适用于IE6。

Answer 4

对HTML和CSS进行一些更改后，您可以使用带有某些div的表display样式来执行此操作。

http://jsfiddle.net/mwg3j17d/6/

<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%;   
}

您也可以使用表格本身。

为什么我不能并排2个iframe，总宽度为100％？

4 个答案: