Вертикальное выравнивание без таблиц

Question

У меня есть 3 столбца поля, первые 2 столбца это описание, а последний столбец это изображение. Есть ли способ вертикального выравнивания описания по высоте изображения. Я не мог указать высоту строки, так как высота изображения будет меняться. В настоящее время, если я использую таблицу, то нет проблем. Но я хочу использовать div или li.

Любое предложение будет с благодарностью. Заранее спасибо.

Answer 1

Вертикальное центрирование без таблиц сложно, но есть несколько обходных путей, посмотрите, можете ли вы их использовать:

http://www.student.oulu.fi/~laurirai/www/css/middle/ http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 2

Я думаю, вы можете использовать некоторые коды JavaScript в функции $(document).ready() для этого сначала вы должны использовать ID для всех ваших элементов (2 div описания и один div изображения). после этого вы можете написать некоторый код javascript для получения изображения по идентификатору и получить его атрибут width, а затем установить это значение для ширины обоих ваших div-ов описания. есть пример HTML:

<div id="desc1"><!-- some content --></div>
<div id="desc2"><!-- some content --></div>
<div id="image"><!-- some image --></div>

JavaScript должен быть примерно таким:

$(document).ready(function(){
    var width = $('#image')[0].attribute['width'];
    $('#desc1')[0].setAttribute('width',width);
    $('#desc2')[0].setAttribute('width',width);
});

кстати, вы можете использовать специальное и одинаковое имя для обоих div-ов описания и получать их, вызывая метод $(document).getElementsByName('some_name'), а затем использовать цикл for. так как вам нужно работать только с двумя div, производительность не меняется

удачи;)

Answer 3

Немного javascript поможет вам разобраться, чтобы установить DIV на линии равной высоты Здесь вам может помочь плагин Jquery:

http://www.cssnewbie.com/equalheights-jquery-plugin/