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

我认为你可以在$(document).ready()函数中使用一些javascript代码首先，您应该为所有元素使用ID（2个描述div和一个图像div）。之后，您可以编写一些javascript代码以通过ID获取图像并检索其宽度属性，然后将此值设置为两个描述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/

垂直对齐无表格

3 个答案: