Question

我需要将此蓝色div放在红色div旁边，而黄色div必须保留在原位。

http://jsfiddle.net/pCGxe/

如何在不使用position:absolute, float:none之类的东西的情况下执行此操作 - 等等......讨厌的黑客？

Answer 1

将margin-top: -50px添加到大div。

或者，您也可以将小div包装在另一个div中，然后浮动它。取决于具体情况。

position: absolute，float: none根本不是讨厌的黑客，他们是网站建设者最好的朋友:)。

Answer 2

不要添加固定数字的边距，尤其是没有固定负数的边距。如果您的网站设计或div的大小稍后更改，该怎么办？您需要更改所有这些边距。

你走了： http://jsfiddle.net/pCGxe/10/

HTML

<div id="container">
    <div id="div1and2">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
    <div id="bigdiv"></div>
</div>

CSS

#div1and2 {
    float: left;
}

Answer 3

在我看来，绝对定位不是黑客，而是大多数开发人员只是不知道如何使用它 - 它几乎就像隐藏的CSS知识：P

所以这是一个如何使用绝对定位来解决这个特定问题的例子：

#container{
    width:500px;
    height:400px;
    border:1px dashed black;
    position:relative;
    top:0px;
    left:0px;
}
#div1{
    width:50px;
    height:50px;
    background:red;
}
#div2{
    width:50px;
    height:100px;
    background:yellow;
}
#bigdiv{
    width:350px;
    height:250px;
    position:absolute;
    left:50px;
    top:0px;
    background:blue;
}

为了使绝对定位正常工作，绝对定位元素的一个祖先元素（在这种情况下为#bigdiv）必须非静态定位。 position:static是任何元素的默认定位，因此，如果我希望#bigdiv远离50px左侧#container，则#container必须为非 - 静态定位;因此position:relative;。

对于记录，float:none 肯定不是黑客：P

Answer 4

CSS

#container{
    width:500px;
    height:400px;
    border:1px dashed black;
}
#div1{
    width:50px;
    height:50px;
    background:red;
}
#div2{
    width:50px;
    height:100px;
    float:left;
    background:yellow;
}
#bigdiv{
    width:350px;
    height:250px;
    float:right;
    background:blue;
    margin-right: 100px;
}

HTML

<div id="container">
    <div id="bigdiv"></div>   
    <div id="div1"></div>
    <div id="div2"></div>
</div>

css：如何根据层次结构中的第二个div浮动div

4 个答案: