Question

我有两个div彼此相邻，并希望将第二个div放在第一个div的左侧。我无法更改这些div的顺序。

Here's a jsfiddle来说明我的所作所为。

任何想法如何做到这一点？

Answer 1

display: inline-block;

并使用float。

Answer 2

将float:right添加到第一个div，float:left添加到第二个div，并将容器的宽度限制为子项的总宽度

http://jsfiddle.net/NvmUm/1/

Answer 3

使用定位。将div的位置都视为绝对。第二个保留为0，第一个保留为100px;

position:absolute;
left:102px; //whatever needed

两个班级。

Answer 4

您可以添加浮动：右侧和拇指。但是你可能需要添加第三个外部div来定位这两个。

#container {
    background-color: lavender;

}
#outer {
    float:left;
    width:400;
}
#main {
    border: 2px solid green;
    height: 300px;
    width: 300px;
    float:right;
}

#thumbs {
    border: 2px solid blue;
    height: 100px;
    width: 100px;
    float:right;
}


<html>
    <body>
        <div id="container">
            <div id="outer">
                <div id="main">
                    1st div
                </div>
                <div id="thumbs">
                    2nd div
                </div>
            <div>
        </div>
    </body>
</html>

前面<div> </div> </div>左边的<div>后面的位置

4 个答案: