как исправить положение div

Question

как исправить положение div

0

вы бы видели ребята. у каждого моего нижнего изображения есть одна панель заголовка с заголовком. но это не одинаковая высота для всей коробки. все, что я хочу, будет одинаковой высоты во всей коробке, и если вы опрокинете, то вы увидите, что слайд-окно коробки прекрасно. также он будет resposive. я все еще пытаюсь, но не могу это понять. вы бы догадались, где я ошибаюсь. Я просто хочу сделать это идеально. даже если вы любой другой css или js, как это, с отзывчивой поддержкой, тогда напишите здесь, пожалуйста.

благодаря

http://jsfiddle.net/BAVXH/

ниже - css для заголовка

.box {
    float: left;
    border: 1px solid #FFF;
    margin: 2px;
    position: relative;
    overflow: hidden;
    background-color: #F00;
}
.box img {
    position:relative;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.box .caption {
        background-color: rgba(0, 0, 0, 0.8);
        position: absolute;
        color: #fff;
        z-index: 100;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        left: 0;
        text-align: left;
        padding: 2%;
        top: 92%;
        height:96%;
    }
    .box:hover .caption {
        -moz-transform: translateY(-89%);
        -o-transform: translateY(-89%);
        -webkit-transform: translateY(-89%);
        opacity: 1;
        transform: translateY(-89%);
    }

Accore LTD 24 окт. 2013, в 13:59

Источник

1

Я все еще не понимаю твою точку зрения.
Joke_Sense10 24 окт. 2013, в 11:37
0

Проблема в использовании процента (%), если вы используете px вас может быть .caption же height для .caption .
maketest 24 окт. 2013, в 11:38

Теги:

html

css

2 ответа

0

положить высоту в px не в%, как

.box .caption {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
    text-align: left;
    padding: 2%;
    top: 92%;
    height:100px;
}

Anand Jha 24 окт. 2013, в 10:43

Ещё вопросы

Я все еще не понимаю твою точку зрения.
Проблема в использовании процента (%), если вы используете px вас может быть .caption же height для .caption .

Ricky Stam · Accepted Answer · 2013-10-24T10-33-00.000Z

Вы можете использовать что-то вроде этого с помощью jQuery и вычислять вершину для каждой надписи.

for(i=0;i<8;i++){
var h = $('.col-'+i).height();
$('.col-'+i).find(".caption").css("top",h-25 + "px");
}

Надеюсь, это даст вам представление.

Или вы можете поместить его в функцию, вызывая ее каждый раз, когда мышь оставляет изображение и вычислять только верхнюю часть заголовка.
большое спасибо .. это почти приятно работать