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高さが大きくなると、絶対配置のため、 containerand div の外に出てしまいます。content

containerこのまたはcontentのサイズをuploaddivに調整する方法を見つける必要があります。

アップロード クラスを次のようにスタイルすると、次のようになります。

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

動作しますが、この解像度でのみです。contentズームインすると、このパディングが(左側) と(右側) を台無しにしますupload。margin-left を現在のように維持することは良いことuploadです。これは、どの解像度でもこの最小限のスペースを必要とするものが div に残っているためです。

誰でも... アイデアはありますか？

編集

一瞬、私はそれを持っていると思いました。

upload私の場合に属性を指定した場合の問題position: relativeは、divの下のコンテンツ内のすべてをプッシュすることuploadです....

.uploadそのため、をに置き換えて、position: relative;内部にあるものすべてに新しい div を追加しましたcontent(ofcourse を除くupload) 。

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

しかし、今では高さが のcontent高さに等しくなり、やuploadよりも小さい場合は切り取られます。content.insidecontent

申し訳ありませんが、jsfiddle で適切なコード例を示すことができません。Web ページに表示されているものを実際に示しているわけではありません。

4

1 に答える 1

2

相対位置を使用すると、非常に役立ちます。次の詳細でコードを更新します

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

サンプルコード

于 2012-12-05T12:36:16.497 に答える