Javascript 使用css仅显示一行项目，与用户分辨率无关？

我在一个容器里有几个元素

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>

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

例如，假设用户的分辨率为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>

---

他们是

CSS

唯一的解决方案

.container

    {
    width:100%;
    overflow:hidden;
    }

---

他们的CSS是唯一的解决方案

.container

    {
    width:100%;
    overflow:hidden;
    }

---

您必须进行CSS媒体查询

使用此代码，用户需要至少具有

480px

才能查看类

项目

，您还可以查看

最小宽度

@media only screen and (max-width: 480px) {
.item{
visibility: hidden;
}

---

您必须进行CSS媒体查询

使用此代码，用户需要至少具有

480px

才能查看类

项目

，您还可以查看

最小宽度

@media only screen and (max-width: 480px) {
.item{
visibility: hidden;
}

---

试试这个-使用

• display:table

  元素的行为类似于
  元素

• 显示：表格单元格

  元素的行为类似于
  元素

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

    {
    display: table;

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

---

试试这个-使用

• display:table

  元素的行为类似于
  元素

• 显示：表格单元格

  元素的行为类似于
  元素

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

    {
    display: table;

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

---

看看你的两个答案有多不同？你的问题不够清楚。我的理解是：在任何屏幕大小上，你每行只需要一个项目？我现在试图澄清我的问题：-）看看你的两个答案有多不同？你的问题不够清楚。我的理解是：在任何屏幕大小上，你每行只需要一个项目？我现在试图澄清我的问题：-）我不明白这是怎么回事？当添加到元素的右边时，它只是隐藏。如果我将高度设置为一个特定的高度（项目的高度），那么它会起作用，但是高度必须用js计算（因为高度可以根据用户的分辨率而变化）？这让我朝着正确的方向前进。当然，解决办法很简单。我只需要将其和媒体提问结合起来，并根据用户的分辨率设置项目的高度。我会接受这个答案，即使我真的很欣赏你的其他答案（我想在这里接受几个答案，但这是不可能的）。我不明白这将如何工作？当添加到元素的右边时，它只是隐藏。如果我将高度设置为一个特定的高度（项目的高度），那么它会起作用，但是高度必须用js计算（因为高度可以根据用户的分辨率而变化）？这让我朝着正确的方向前进。当然，解决办法很简单。我只需要将其和媒体提问结合起来，并根据用户的分辨率设置项目的高度。我会接受这个答案，即使我真的很欣赏你的其他答案（我想在这里接受几个答案，但这是不可能的）。@bestprogrammerintheworld-检查工作演示最好将图像宽度设置为

max width:100%

，高度设置为

auto

，以避免失真-感谢分享，但我已经澄清了我的问题。请阅读。很抱歉不够清晰。@bestprogrammerintheworld-签出工作演示最好将图像宽度设置为

max width:100%

，高度设置为

auto

，以避免失真-谢谢分享，但我已经澄清了我的问题。请阅读。抱歉说得不够清楚。