Question

我正在玩DIV，想知道如何实现某些目标的最佳方法。

我希望获得以下结果：

                   ------------------------------|
                   |           DIV 1             |
                   ------------------------------|
                      | DIV 2 |          | DIV 3||
                      ---------          --------|
                                                 |  << Far right of web page

基本上希望DIV 1出现在页面的右侧在它下面想要一些小图像出现在DIV 1底部的某些位置（可能即使如此接近也可能稍微落后于DIV 1）

我得到的问题是：
1. DIV 1后图像出现在同一行 2.可以将DIV 2放在正确的位置，但是DIV 3会出现在DIV 2下面，而不是在它的同一行上

实现这一目标的最佳方法是什么？

Answer 1

http://jsfiddle.net/A5tP2/不确定这是否是您所寻找的，但如果没有任何代码，我无法真正帮助您实现目标。但是，是的。

HTML

<div id="wrapper">
    <div id="oneWrap">
        <div id="one">
        </div>
    </div>
    <div class="image">
           image
    </div>
   <div class="image">
           image
    </div>
</div>

CSS

#wrapper{
    width: 500px;
    height: 500px;
    background: blue;
}
#oneWrap{
    width: 500px;
    height: 100px;
}
#one{
    width: 300px;
    height: 100px;
    background: orange;
    float: right;
}
.image{
    margin-top: 20px;
    margin-left: 50px;
    width: 100px;
    height: 100px;
    background: purple;
    float: right;    
    color: white;
}

Answer 2

将较小的div放在另一个div中，以便能够更精确地定位它们：

<head>
<style>
    #div1{
        float:right;
    }
    #div-helper{
        clear:both;
    }
    #div2{
        float:left;
    }
    #div3{
        float:right;
    }
</style>
</head>

<body>
    <div id="div1">1</div>
    <div id="div-helper">
        <div id="div2">2</div>
        <div id="div3">3</div>
    </div>
</body>

定位DIV正确的方法？

2 个答案: