html - 当文本溢出时我的 div 没有对齐(但只是有时)

Question

我想以适合任何分辨率的最佳方式显示容器，不要太宽也不要太薄:

• 1 block /行分辨率高达 640x480；
• 2 block /行，分辨率为 1024x768；
• 3 block /行，适用于 1366x768 及以上；
• 4 个 block 用于 1680x1050 及以上的分辨率。

理想情况下，它会将容器调整为当前屏幕宽度。

<div class="L">循环播放，会显示5-100次； <div ID="A">没有样式。

<div id="A">
...
    <div class="L V">
        <a href="#"><img src="thumb.jpg">
        <h2>short title</h2>
        medium to long description about lorem ipsum (10-500chrs)
        </a>
    </div>
...
</div>

<div class="L">也用于其他一些地方； <div class="V">主要用于此 View :

div.L {
    border:1px;
    padding:3px;
    margin:2px;
    font-size:21px;
    text-align:justify;
}
div.V {
    width:486px;
    height:149px;
    display:inline-block;
    overflow:hidden;
    text-overflow:ellipsis;
}
div.L img {
    float:left;
    min-width:80px;
    min-height:80px;
    padding-right:4px;
}
div.V img {
    max-width:157px;
    max-height:118px;
}
div.L h2 {
    margin:1px;
    font-size:21px;
}
div.V h2 {
    white-space:nowrap;
}

问题:
我的猜测是它可能与可变文本有关，因为当没有描述(固定大小)或只有几个词时，它们都很好地对齐。

JS fiddle :http://jsfiddle.net/qvpuX/1/

Answer 1

将您的 div.V css 更改为以下内容，

div.V { 
    width:416px; 
    height:149px; 
    float:left; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

Test Link

编辑:

您可以按如下方式向您的 div 添加可变宽度，

@media all and (min-width: 400px) and (max-width: 600px){
    div.V{
        width: 416px;
    }
}
@media all and (max-width: 320px){
    div.V{
        width: 100px;
    }

}

注意:我添加了 width: 100px; 只是为了证明它有效，您可以添加您的 width想要(300px，我从你的评论中猜测)

Test Link - Responsive