1

我最近在这些 div 上苦苦挣扎。例如，看看下面的这段代码：

<div class="container">
{
    width: auto;
    height: auto;
}
    <div class="content">
    {
        width: auto;
        height: auto;
    }
        <div class="upload">
        {
            width: 400px;
            margin-left: 600px;
            position: absolute;
        }
        </div>
    </div>

    <div class="footer>

    </div>
</div>

首先是屏幕上实际内容的一小幅画（不能画得更好）：

--------------------------------------
|               CONTAINER            |
|   _____________________________    |
|   [       CONTENT   = = = =  =]    |
|   [                 = UPLOAD =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 =        =]    |
|   [                 = = = = = ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [                           ]    |
|   [___________________________]    |
|   _____________________________    |
|   [          FOOTER           ]    |
|   [___________________________]    |
--------------------------------------

当类upload的高度变大时，由于绝对定位，它会漂浮在container和div 之外。content

我需要找到一种方法将 thiscontainer或content' 的大小调整为uploaddiv。

当我像这样设置上传类的样式时：

position: relative;
float: right;
padding-right: 500px;

它有效，但仅在此分辨率下有效。如果放大，此填充会弄乱content（左侧）和upload（右侧）。保持 margin-left 现在的样子是好的，因为uploaddiv 剩下的东西在任何分辨率上都需要这个最小的空间。

所以任何人......有什么想法吗？

编辑

有那么一瞬间，我虽然拥有它。

如果你在我的例子中给出upload属性，问题position: relative是它将所有内容都推到了uploaddiv 的内容中......

所以我替换了.uploadwithposition: relative;并在里面的任何东西周围添加了一个新的 div content（除了upload当然）

.insidecontent
{
float: left;
position: absolute;
top: 170px;
}

但是现在content高度等于 's 的高度，upload当它小于content's 或.insidecontent's 时，它会被切断。

很抱歉，我无法在 jsfiddle 中给出一个好的代码示例，它并没有真正显示我在网页上看到的内容。

4

1 回答 1

2

您可以使用相对定位，这对您有很大帮助。使用以下详细信息更新您的代码

.upload{
    width: 25%;
    position: relative;
    top: -24%;
    left: 69%;    
}

示例代码

于 2012-12-05T12:36:16.497 回答