Question

我有一组缩略图，右边有一小段描述，我想要做的就是确保无论是否有1行文字，2行或3行文字总是一致地定位内联缩略图的中间？香港专业教育学院尝试给.desc一个与缩略图相同的高度，香港专业教育学院尝试了vertical-align：中间，我尝试过显示：表格单元格，但我无法想出任何有用的东西（无论如何）。如果有人能提供一个很棒的解决方案。

HTML

<ul id="container">
    <li>
        <a href="#">
        <img src="http://dummyimage.com/120x80/000/fff" />
        <p class="desc">This is the text on 2 lines</p>            
        </a>
    </li>  
<li>
        <a href="#">
        <img src="http://dummyimage.com/120x80/000/fff" />
        <p class="desc">This is the text</p>            
        </a>
    </li>  
<li>
        <a href="#">
        <img src="http://dummyimage.com/120x80/000/fff" />
        <p class="desc">This is the text going onto 3 lines</p>            
        </a>
    </li>      
</ul>

CSS

#container li{float:left;width:230px;margin-right:10px;}
#container li a{position:relative;display:block;}
#container li a img{float:left;}
#container li a .desc{position:absolute;right:0;width:100px}

链接到小提琴：http://jsfiddle.net/Luvq3/1/

Answer 1

HTML

 <ul id="container">
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li> 
    <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li> 
     <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li> 
    <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li>     
     <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text on two lines lol</p></div>           
            </a>
        </li>      
    </ul>

CSS：

#container li{float:left;width:230px;margin-right:10px;}

.column {display:inline-block; vertical-align:middle}
.rightcol {width:100px;}

Answer 2

既然您知道缩略图的高度，为什么不进行绝对定位？

#container li a .desc { position:absolute;right:0; top: 20px; width:100px }

只需使用substr控制您的.desc，这样就不会在拇指下方溢出？

确保我的缩略图描述始终与缩略图的中间对齐？

2 个答案: