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

修改你的代码:-)无需在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>

Answer 2

您需要将代码更新为以下

<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选择器 - ＆gt; 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/

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

2 个答案: