0

ボックス内の div をラッパー div の中心に配置する必要があります。ラッパー div の高さはサイドバー div の高さに依存します。ボックス内の div は、ラッパー div に対して絶対的に配置され、その中の画像とコンテンツに対応する可変幅と高さを設定します。

これは、ボックス内の div に幅と高さを与えることで実現できますが、幅と高さを可変にする必要があります (ボックス内の div は、パディング付きの img と同じサイズにする必要があります)。

jsFiddle コード はこちら

これは HTML コードです。

    <body>
        <div class="wrapper">
            <div class="sidebar"></div>
            <div class="inside-box">
                <img src="badge.gif" />
            </div>
        </div>
    </body>

CSS

    * {
    margin: 0;
    }

html,body {
    height: 100%;
    }

body {
    background: white;
    display: block;
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    }

.wrapper {
    position:relative;
    height: auto;
    width:70%;
    margin: 0 auto ;
    background:green;

    }
.sidebar {
    height: 500px;
    width:30%;
    background: red;
    clear:both;
    }
.inside-box {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:yellow;
    min-width:275px; min-height:183px;
    padding:10px;
    }

現在 ここに画像の説明を入力

期待される出力 ここに画像の説明を入力

4

2 に答える 2