1

左側に画像コンテンツを表示し、右側にサイドバーを表示するための css があります。画像の横と向き (横、縦) が異なる場合があるため、画像の右側にある詳細サイドバーを画像に対して相対的に配置する必要があります。

スクリーンショットは次のとおりです。ここに画像の説明を入力

cssコードは次のとおりです。

* {
    margin: 0;
    padding: 0;
}

a {
    /* text-decoration: underline; */
    text-decoration: none;
    color: #6B2E42;
}

a:hover {
    text-decoration: none;
}

body {
    background: #C9CFCD url(images/img01.gif);
    font-size: 11pt;
    color: #323232;
    line-height: 1.75em;
}

body,input {
    font-family: Arial, sans-serif;
}

#content {
/* HOLDS THE IMAGE */
    background: #FFFFFF;
/*  width: 595px;  */
    color: #6E6E6E;
    padding: 10px 10px 0 35px;
    float: left;
    border-bottom: solid 2px #BBC1BF;
}

#page {
    margin: 20px 0 20px 0;
    position: relative;
    width: 980px;
    padding: 0;
}

#page ul {
    list-style: none;
}

#page ul li {
    padding: 2px 0 2px 0;
    border-top: solid 1px #D9D9D9;
}

#sidebar {
    background: #FFFFFF;
    margin: 0 0 0 685px;  
    color: #6E6E6E;
    padding: 10px 10px 10px 20px;
    width: 225px;
    border-bottom: solid 2px #BBC1BF;
}

#wrapper {
    width: 980px;
    margin: 35px auto 0 auto;
    position: relative;
}

そして、ここにレイアウトがあります：

<body>

    <div id="page">
        <div id="content">

                <p>
                    <img src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
                </p>

            <br class="clearfix" />
        </div>
        <div id="sidebar">
            <h3>DETAILS</h3>
            <div class="date-list">
                <ul class="list date-list">
                    <li class="first"><span class="id">ID:</span> <a href="#">1</a></li>
                    <li class="last"><span class="ref">REFERENCE No.:</span> <a href="#">LSK001</a></li>
                    <li><span class="title">TITLE:</span> <a href="#">Monalisa</a></li>
                    <li><span class="obj">OBJECT TYPE:</span> <a href="#">Painting</a></li>
                    <li class="last"><span class="mat">MATERIAL USED:</span> <a href="#">Canvas,oil...</a></li>
                    <li class="last"><span class="tech">TECHNIC:</span> <a href="#">brush stroking...</a></li>
                    <li class="last"><span class="width">WIDTH:</span> <a href="#">1 meter</a></li>
                    <li class="last"><span class="height">HEIGHT:</span> <a href="#">3 meters</a></li>
                    <li class="last"><span class="artist">ARTIST:</span> <a href="#">Da Vi nci</a></li>
                    <li class="last"><span class="source">SOURCE:</span> <a href="#">....</a></li>
                </ul>
            </div>
            <h3>DESCRIPTION</h3>
            <p>
                Urna dis suscipit lorem sed luctus. Elementum suspendisse tempus fermentum ornare libero phasellus nibh conseuqat dolore.
            </p>
        </div>
        <br class="clearfix" />
    </div>
</body>

ブラウザでのレイアウトについては、添付のスクリーンショットをご覧ください。

ジョセフ

4

1 に答える 1

0

では、画像が小さい場合は右側のサイドバー、大きい場合は画像の下のサイドバーでしょうか?

#page{
        width: 600px;
        margin: 0 auto;
        background-color: #efefef;
        overflow:hidden;
    }

    #content,
    #sidebar{
        float:left;

    }

    #sidebar{
        margin: 10px;
        padding:10px;
        background-color: tan;
    }

    .clear{
        clear: both;
    }

http://jsfiddle.net/sy9xM/1/ - img の幅を変更して結果を確認できます。それはあなたのために働きますか？

于 2013-03-12T13:38:54.980 に答える