0

我想要的只是让我的两个 div 彼此相邻堆叠。它们位于容器内。为什么它不起作用？

这是我的 CSS：

#housecontainer {
    height: 420px;
    width: 1000px;
    padding-left: 110px;
    padding-top: 80px;
}

#houseimage {
    float: left;
    height: 388px;
    width: 516px;
}

#rose {
    width:200px;
    height:100px;
    float:left;
}
4

4 回答 4

1

您有几个结构错误。

尝试像这样构建您的 HTML：

http://jsfiddle.net/bGyV4/

于 2012-07-22T00:08:24.327 回答
1

从您在评论中发布的 HTML 来看，您的页面结构是：

#devcontainer
  #develbox
    #housecontainer
      #houseimage
        p
          a
            img
        #rose

由于#rose是 的子级#houseimage，它不会跟随与它相同的浮动。由于#houseimage宽度为 516，图像也是如此，因此没有剩余空间#rose，它被强制在下方。

只需</div>在前面再放一个<div id="rose">，这样它就在里面#housecontainer和旁边 #houseimage，就像你想要的那样。然后添加</div>您缺少的另外两个。

于 2012-07-22T00:12:34.730 回答
0

你的 html 错误，一些DIV标签没有关闭，试试这个：

<div id="devcontainer">
    <div id="develbox">
        <div id="housecontainer">
            <div id="houseimage">
                <p>
                    <a href="images/rosebrook.pdf" target="_blank">
                        <img src="images/rosebrookthumb.png" width="516" height="388" />
                    </a>
                </p>
            </div>
            <div id="rose">THIS ISNT WORKING!!!</div></div>
        </div>
    </div>
</div>
于 2012-07-22T00:18:48.560 回答
0

这是您在评论中发布的 HTML：

<div id="housecontainer">
    <div id="houseimage">
        <p>
            <a href="images/rosebrook.pdf" target="_blank">
                <img src="images/rosebrookthumb.png" width="516" height="388" />
            </a>
            <div id="rose">
                <div id="rose">THIS ISNT WORKING!!!</div>
            </div>
        </p>
    </div>
</div>

这有很多问题：

  1. 元素的id必须是唯一的。它用于标识元素。在您的标记中有两个div带有id="rose".
  2. #houseimage从您的问题来看，您似乎想要#rose并肩作战。这不会发生，因为#rose在里面 #houseimage。也就是说，它是 的孩子#houseimage。您需要将它移到 之外，div以便它#rose是 的兄弟#houseimage。

将您的 HTML 更改为如下所示：

<div id="housecontainer">
    <div id="houseimage">
        <p>
            <a href="images/rosebrook.pdf" target="_blank">
                <img src="images/rosebrookthumb.png" width="516" height="388" />
            </a>
        </p>
    </div>
    <div id="rose">
        <div id="roseChild">THIS ISNT WORKING!!!</div>
    </div>
</div>

jsFiddle 演示

于 2012-07-22T00:14:25.417 回答