javascript - 仅显示一行带有 css 的元素，与用户分辨率无关？

Question

容器中有几个元素

html

<div class="container">
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
<div class="item"><img src="blabla.png" /></div>
</div>

元素的数量可能不同，因为这些元素是从数据库动态生成的。

是否有任何简单的方法来显示仅在 ONE row 上显示的元素，而与用户拥有的屏幕分辨率无关(使用 css？)？或者 Javascript 是实现此目标的唯一方法吗？ (我想你必须计算图像的当前宽度，并告诉一行中有多少适合，并据此进行调整，但希望有更好的解决方案)

css 看起来像这样:

.item {
    position:relative;
    float:left;
    padding:0;
    width:19%;   
    margin-right:1%;
}

.item img {
    width:100%;
    height:auto;
}

更新我会尽力澄清我的问题。

例如，假设用户的分辨率为 1280x1024。然后大约 5 个元素适合一行，下一行可能有 2 个。我只想显示前 5 个元素。

<div class="container">
    <div class="item"><img src="blabla.png" /></div> <!-- show 1 -->
    <div class="item"><img src="blabla.png" /></div> <!-- show 2 -->
    <div class="item"><img src="blabla.png" /></div> <!-- show 3 -->
    <div class="item"><img src="blabla.png" /></div> <!-- show 4 -->
    <div class="item"><img src="blabla.png" /></div> <!-- show 5 -->
    <div class="item"><img src="blabla.png" /></div> <!-- hide 6 -->
    <div class="item"><img src="blabla.png" /></div> <!-- hide 7 -->
</div>

示例 2:如果用户的屏幕分辨率为 800x600(是的，当然，但只是为了说明!)那么一行可能适合三个元素，那么我只想显示这三个元素。

<div class="container">
    <div class="item"><img src="blabla.png" /></div> <!-- show 1 -->
    <div class="item"><img src="blabla.png" /></div> <!-- show 2 -->
    <div class="item"><img src="blabla.png" /></div> <!-- show 3 -->
    <div class="item"><img src="blabla.png" /></div> <!-- hide 4 -->
    <div class="item"><img src="blabla.png" /></div> <!-- hide 5 -->
    <div class="item"><img src="blabla.png" /></div> <!-- hide 6 -->
    <div class="item"><img src="blabla.png" /></div> <!-- hide 7 -->
</div>

Answer 1

试试这个 - 使用display:table-cell and display:table

• display:table 该元素的行为类似于 <table>元素
• display:table-cell 该元素的行为类似于 <td>元素

See the working Demo Here

.item {
    width:auto;   
    margin-right:1%;
     display: table-cell;
}
.container

    {
    display: table;

    }
.item img {
    width:100%;
    height:50px;
}