Динамическое позиционирование боковой панели относительно содержимого слева

У меня есть 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), чтобы упростить работу? –

Итак, если изображение маленькое - вы хотите, чтобы боковая панель появилась рядом с изображением? – Danield

Да, даже если изображение маленькое, боковая панель должна быть рядом с ним. – user1868306

Так что, если картинка маленькая - боковая панель справа, если большая, боковая панель под изображением?

#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

Динамическое позиционирование боковой панели относительно содержимого слева

ответ

Смежные вопросы