如何在一个页面中放置三个 div？

Question

我希望页面垂直拆分，一个 div 在页面的右半部分，另外两个 div 在页面的左半部分。我怎么能这样做？我的代码如下：

<html>
<head>
<style type="text/css">
html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
div2v{
    width: 50%;
    height: 100%;
    float: left;
}
div4{
    width: 50%;
    height: 50%;
    float: left;
}
</style>
</head>
<body>

<div id="div4">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>
<div id="div4">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>
<div id="div2v">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 800px" name="internal"></iframe>
</div>

</body>
</html>

是否有更好的方式在页面上排列 iframe（没有 Javascript）？

Answer 1

您需要将代码更新为以下内容

<html>
<head>
<style type="text/css">
html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#div2v{
    width: 50%;
    height: 100%;
    float: left;
}
#div4{
    width: 50%;
    height: 50%;
    float: left;
}
</style>
</head>
<body>

<div id="div4">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>

<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

<div id="div2v">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

</body>
</html>

所做的更改

更新 css 选择器 -> div2v to #div2v 和 div4 到 #div4

从

更新 html

<div id="div4">
  <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>
<div id="div4">
   <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

到

<div id="div4">
    <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>

    <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

供参考 - http://jsfiddle.net/1aywhc2s/

Answer 2

修改了您的代码 :-) 无需以 px 为单位设置高度我已将其设为响应式，您可以查看此解决方案

<html>
<head>
<style type="text/css">
html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#div2{
    width: 100%;
    height: 50%;
    float: left;
}
#div1{
    width: 50%;
    height: 100%;
    float: left;
}
#div3{
    width: 50%;
    height: 100%;
    float: right;
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">
    <iframe src="https://www.wikipedia.org/" style="width: 100%; height:  100%" name="internal"></iframe>
  </div>
  <div id="div2">
    <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 100%" name="internal"></iframe>
  </div>
</div>
<div id="div3">
  <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 100%" name="internal"></iframe>
</div>
</body>
</html>

如何在一个页面中放置三个 div？

How can I position three divs in a page?

html

position