動態定位邊欄相對於左側的內容

我有css用於顯示左側的圖像內容和右側的側邊欄。圖像可以在側面和方向（橫向，縱向）上有所不同，因此我希望圖像右側的細節側邊欄與圖像相對定位。動態定位邊欄相對於左側的內容

這裏是screenshort： 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>

請參見附件screenshort的佈局瀏覽器。

約瑟夫

來源

2013-03-07 user1868306

你能製作一個[小提琴]（http://jsfiddle.net）來簡化工作嗎？ – 2013-03-07 06:56:08

因此，如果圖像很小 - 您想讓側欄出現在圖像旁邊？ – Danield 2013-03-07 07:12:05

是的，即使圖像很小，邊欄也應該緊靠它。 – user1868306 2013-03-07 08:04:54

所以，如果圖片是小 - 在右側欄中，如果大，圖像下側欄？

#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-12 13:38:54 Evgeniy

動態定位邊欄相對於左側的內容

回答

相關問題