2

我正在玩 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 下方，而不是在同一行

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

4

2 回答 2

2

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;
}
于 2013-05-20T20:33:06.747 回答
0

将较小的 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>
于 2013-05-20T20:34:49.777 回答