我想让页面垂直分割，一个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)？
最佳答案
修改了您的代码 :-) 无需以 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>
关于html - 如何在一个页面中放置三个 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31493512/