0

我想以任何分辨率的最佳方式展示容器，不要太宽也不要太薄：

  • 1 块/行，分辨率高达 640x480；
  • 1024x768 分辨率下 2 块/行；
  • 1366x768 及以上分辨率为 3 块/行；
  • 4 个块，用于 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">主要用于此视图：

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 小提琴：http: //jsfiddle.net/qvpuX/1/

4

2 回答 2

1

只需将float: left规则添加到div.V选择器

http://codepen.io/timothyasp/pen/AFerh

全视图：http ://codepen.io/timothyasp/full/AFerh

于 2012-12-18T07:39:01.220 回答
1

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

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

测试链接

编辑：

您可以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我从您的评论中猜测）

测试链接 - 响应式

于 2012-12-18T07:42:18.827 回答