Question

我有css用于在左侧显示图像内容，在右侧显示侧边栏。图像的侧面和方向可能不同（横向，纵向），因此我希望图像右侧的细节侧边栏相对于图像定位。

以下是截屏： enter image description here

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>

请参阅随附的屏幕截图，了解浏览器中的布局。

约瑟夫

Answer 1

所以，如果图片很小 - 右边的侧边栏，如果图片下方的边栏很大？

#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宽度以检查结果。它适合你吗？

相对于左侧内容动态定位侧边栏

1 个答案: