为什么我不能有2个iframes并排，总宽度100％？ [英] Why cant I have 2 iframes side by side with total width 100%?
问题描述
我共有4 iframe 。
< body>
< iframe id =top_framesrc =>< / iframe>
< iframe id =left_framesrc =>< / iframe>
< iframe id =right_framesrc =>< / iframe>
< iframe id =bottom_framesrc =>< / iframe>
< / body>
我想要其中2个 left_frame code> right_frame 并排，其总宽度为100％（ left_frame 为25％，为75％
#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％？
首先，您需要告诉 #left_frame 和<$ c $
您可以使用几种不同的方法，但是其中一个最流行的是浮动他们：
#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，您可以向iframes添加 box-sizing：border-box; ，而不必使用 calc 语句。这将是：
#left_frame，
#right_frame {
float：left;
}
iframe {
box-sizing：border-box;
}
更新小提琴以修正 right_frame
http://jsfiddle.net/mwg3j17d/12/
I have total 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>
I want 2 of them left_frame and right_frame side by side with their total width 100% (25% for left_frame and 75% for right_frame).
So I put this CSS:
#top_frame {
width: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#bottom_frame {
width: 100%;
}
But it did not work as you can see in this JSFiddle http://jsfiddle.net/srhcan/mwg3j17d/1/
If I decrease the width of right_frame to 73% then they will show side by side but will leave bit space on the right side.
What is the reason of this?
How can I have 2 iframes side by side with total width 100%?
First off, you need to tell the #left_frame and #right_frame that you want them to be next to each other.
You can do this a few different ways, but one of the most popular is floating them:
#left_frame,
#right_frame {
float: left;
}
Now, this works, but you still won't see them next to each other. That's because they have an inherent 2px border by default.
Therefore, you can either remove the border:
#left_frame,
#right_frame {
float: left;
border: none;
}
OR, you can subtract the border from the widths. I would recommend this.
#left_frame,
#right_frame {
float: left;
}
#left_frame {
width: calc(25% - 4px);
}
#right_frame {
width: calc(75% - 4px);
}
Link to your updated fiddle: http://jsfiddle.net/mwg3j17d/4/
EDIT - As pointed out by @Rob Scott, you can add box-sizing: border-box; to the iframes to not have to use the calc statements. That would look like:
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
Updated fiddle to fix the spacing issue to the right of right_frame
http://jsfiddle.net/mwg3j17d/12/
这篇关于为什么我不能有2个iframes并排，总宽度100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
