Позиционирование CSS, наложение div в гибком макете

Я впервые разрабатываю гибкий макет, и одна из вещей, которые я пытаюсь сделать, — это наложить подпись внизу фотографии. Метод, который я использую, заключается в том, что фотография (ширина: 100%) находится внутри div (ширина: 50%) и добавление div, содержащего подпись под фотографией. Чтобы наложить его, я сделал высоту подписи статической 30 пикселей и установил положение как относительное и верхнее -50 пикселей (+ отступы).

CSS:

#contentdiv {
    width:50%;
}
#gallerydescription {
    height:30px;
    padding:10px;
    background-image:url(../contentbkg.png);
    position:relative;
    top:-50px;
    margin-bottom:-50px;
}

HTML:

<div id="contentdiv">
   <img src="blog/1.gif" width="100%" />
   <div id="gallerydescription">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
   </div>
</div>

Визуально это делает то, что я хочу, но на самом деле это не настоящий гибкий макет, и он выглядит некрасиво, если заголовок слишком или слишком короткий. Есть ли способ, с помощью которого я мог бы позволить длине заголовка определять высоту элемента div заголовка, а «верх» был отрицательным значением любой высоты и заполнения?


css css-position fluid-layout
person Joseph Mok    schedule 15.04.2013    source источник
comment
Вам нужно будет использовать jquery для решения этого типа математики   -  person Andrew    schedule 15.04.2013

Ответы (3)


arrow_upward
0
arrow_downward

Чистое CSS-решение для проблемы, похожей на вашу

CSS

      #contentdiv{
        width: 50%;
        position: relative;
     }
     #gallerydescription{
        padding: 10px;
        background-image: url('../contentbkg.png');
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 60%;
        overflow: hidden;
     }

Разметка (без изменений)

 <div id="contentdiv">
     <img src="blog/1.gif" width="100%" />
     <div id="gallerydescription">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
     </div>
  </div>

Обновлять

jsfiddle попробуйте эту скрипту

person Ejaz    schedule 15.04.2013
comment
Это не сработает, если вы сделаете width: 100%; и добавите также padding: 10px;, потому что общая ширина будет больше 100% и появится полоса прокрутки :). Отступы должны быть добавлены внутри другого элемента - person Catalin; 15.04.2013
comment
о какой ширине элемента вы говорите? Я уверен, что вы не читали внимательно часть CSS и не пробовали скрипку;) - person Ejaz; 15.04.2013

arrow_upward
0
arrow_downward

Попробуйте это и посмотрите, как это выглядит:

#contentdiv {
    width:50%;
    position: relative
}
#gallerydescription {
    height:30px;
    padding:10px;
    background-image:url(../contentbkg.png);
    position:absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
}
person Catalin    schedule 15.04.2013
comment
так что вы не прочитали but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div, добавляя height: 30px к #gallerydescription - person Ejaz; 15.04.2013

arrow_upward
-1
arrow_downward

Для этой цели вы можете попробовать положение пользовательского интерфейса jQuery.

Это позволяет позиционировать два элемента относительно, например

$("#elementToPosition").position({
  my: "left top",
  at: "right bottom",
  of: "#targetElement"
});

А затем измените свойство top для наложения:

$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);
person Bigood    schedule 15.04.2013