Question

尝试使用div进行上述操作。每个矩形（一个长+右边的正方形）应该是一个单位。那么它应该是div中的div吗？..（我显然是新手，所以感谢任何帮助！）。框架的大小不应该是固定的，而是有弹性的。

<body>
<div id="frame">
    <div id="div1"></div>           
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="divSettings"></div>
</div>
</body>

（在样式表中创建每个div的边框）

Answer 1

我会使“frame”div包含你的div并使用float设置所有其他div：right，float“left，br tags和widht = xx％properties。

Answer 2

我会创建something like this，它使用div中的div，宽度为％，float:right将内部div放在右侧

/* HTML */
<div id="frame">
    <div class='row'><div class='inner'></div></div>
    <div class='row'><div class='inner'></div></div>
    <div class='row'><div class='inner'></div></div>
    <div class='row'><div class='inner'></div></div>
    <div id="divSettings"></div>
</div>

/* CSS */
#frame {
    width: 350px;
    height: 460px;
}
.row {
    height:100px;
    width: 100%;
}
.inner {
    float: right;
    width: 33%;
    height:100%;
    border-left:1px solid black;
}
#divSettings {
    height: 50px;
    width:100%;
}
div:not(.inner) {
    border: 1px solid black;
}

注意：设置frame的高度时，不要忘记包含内部div所具有的顶部和底部边框的添加高度

Answer 3

Fiddle

<div class="left" style="float:left; width:70%">
    <div class="left1">left 1</div>
    <div class="left1">left 2</div>
    <div class="left1">left 3</div> 
</div>

<div class="right" style="float:right; width:30%">
<div class="right1">right 1</div>
    <div class="right1">right 2</div>
    <div class="right1"> right3</div> 
</div>
<div class="footer" style="clear:both;">footer
</div>

Answer 4

<强> EXAMPLE

通过这种方式，我们创建行并将两个div放入此行。

还有另一种方法，我们将所有div放在div容器内相对位置：

<强> EXAMPLE 2

现在由您来决定使用什么更好...

使用div的简单框架

4 个答案: