将一个div与另一个div对齐

Question

我有两个div，就像附图所示。我的问题是，当div1结束时，div2没有像图1那样移动到div1下面，而是停留在列中（就像第二个附图一样）。

div1的css如下：

width: 391px;
height: 380px;
float: left;
margin-right: 10px;

当div2没有css时（我不知道要插入什么），该怎么办？

我该怎么做？

谢谢，Mattia

- pindol

Answer 1

假设你的标记是：

<div id="div1">...</div>
<div id="div2">...</div>

您无需进行任何操作，因为如果未对 div2 应用样式，则整个布局将如图1所示。

请参见fiddle: http://jsfiddle.net/qAqv3/

- Fabrizio Calderan

Answer 2

一个 div 只能有一个宽度和一个高度，因此它只能是一个矩形。您可以将 div1 插入到 div2 中，并使用 float:left 设置 div2（包括 div1）的内容。

以下是演示：http://jsfiddle.net/DX2vJ/1/

- gabitzish

Answer 3

你可以在一个 div 中嵌套另一个 div，然后将第二个 div 相对于第一个 div 定位（至少我认为这是你想做的）。

#Menu
{
    position:absolute;
    text-align: left;
    width="1024px";
    height="768px";
}

#startButton
{
    position:relative;
    left: 400px;
    top: -350px;
}

<div id="Menu"> <img src="path/to/img.jpg" width="1024px" height="768px"></img>

    <div id="startButton">
        <img src="path/to/img.jpg">
    </div>

</div>

我希望这对你有所帮助 :)

- Arjen van Heck

---

谢谢。在 div 内部，我没有图片，只有文本。 - pindol

Answer 4

在您的第一张图片中，L格式中没有像那样的div，div是矩形。

如果您想要像第一张图片那样的设计，请关注gabitzish和/或Arjen van Heck；如果您想要一个div位于其他下方（两个矩形），请在第二个div的css规则中添加clear: both;。

- fiatjaf