Question

我希望以最佳方式展示容器以获得任何分辨率，而不是太宽而不是太薄：

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

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

<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/

Answer 1

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

即可

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

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

Answer 2

将您的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

文本溢出时我的div不对齐（但有时只是）

2 个答案: