如何创建每行有2个列表项的列表视图

要创建每行显示两个列表项的列表视图，可以使用HTML和CSS来实现。以下是一个简单的示例，展示了如何实现这一布局：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Items Per Row List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="list-container">
        <div class="list-item">Item 1</div>
        <div class="list-item">Item 2</div>
        <div class="list-item">Item 3</div>
        <div class="list-item">Item 4</div>
        <div class="list-item">Item 5</div>
        <div class="list-item">Item 6</div>
    </div>
</body>
</html>

CSS部分（styles.css）

.list-container {
    display: flex;
    flex-wrap: wrap;
}

.list-item {
    flex: 1 1 calc(50% - 10px); /* 每个项目占据50%宽度，减去间距 */
    margin: 5px;
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
}

解释

HTML结构：
- 使用一个div容器包裹所有的列表项。
- 每个列表项也是一个div，类名为list-item。

CSS样式：
- .list-container使用display: flex;来启用Flexbox布局，并设置flex-wrap: wrap;以便在需要时换行。
- .list-item使用flex: 1 1 calc(50% - 10px);来确保每个项目占据50%的宽度（减去间距），并且可以增长和收缩以适应容器大小。
- margin和padding用于添加间距和内边距，使布局看起来更美观。

应用场景

这种布局适用于需要展示成对信息的场景，例如：

商品列表，每行显示两个商品。
图片画廊，每行显示两张图片。
新闻列表，每行显示两条新闻摘要。

可能遇到的问题及解决方法

项目宽度计算错误：
- 确保calc(50% - 10px)中的10px是所有边距的总和（左右各5px）。
- 如果项目有边框或内边距，确保使用box-sizing: border-box;。

项目换行不正确：
- 检查.list-container是否有足够的空间来容纳两列项目。
- 确保没有其他CSS规则干扰Flexbox布局。

通过上述方法，你可以轻松创建一个每行显示两个列表项的列表视图，并且可以根据需要调整样式以适应不同的设计需求。

在PagedList部分视图中使用MVC4时不需要的行为

、、、、

我有一个部分视图，显示列表中的许多搜索结果。出于美观的考虑，我显示结果-每行列出两项： 列表项目3列表项目4 等等..。我正在用PagedList实现分页，因为它是一个部分视图，所以我使用Ajax.ActionLink来导航每个“分页列表”。GetAllProperties", new { page = 1 }, new AjaxOptions {

浏览 3提问于2013-04-12得票数 0

1回答

如何创建每行有2个列表项的列表视图

我正在尝试创建一个列表视图，其中的列表标题只需要屏幕的一半(或更少)，这样两个项目就可以相邻显示。我在网上找不到任何例子。有人知道如何做到这一点吗？我想创建类似这样的东西：https://imgur.com/tIt8adR

浏览 11提问于2019-05-02得票数 0

1回答

我想要计算RecyclerView项目上的点击量

、、、

我有一个回收站视图，这个回收站有5个项目，b，c，d，e.Suppose 10用户点击这个itemb.how我可以得到计数= 10，我想把这个计数数据存储在firebase数据库中。(我没有使用firebase回收站视图)我的另一个问题是我有5个列表，我想在一个回收站视图中随机显示5个列表项。我怎么才能让this.Thank你。

浏览 4提问于2020-09-23得票数 0

1回答

如何在列表视图中每行创建两列

、、、、

我们如何在列表视图中每行创建两列，并将数据绑定到行？我想创建一个列表，其中每行都有两列，并且每列都绑定了一个数据模板。

浏览 0提问于2017-06-01得票数 1

2回答

android列表视图，每行有多个列表标题

、

我想在列表视图中每行显示多个列表标题。显示没有问题，因为我覆盖了getView和getCount。但问题出在onItemClickListener:我似乎无法区分所单击的是哪个列表项目。对于如何实现这一点有什么想法吗？

浏览 4提问于2012-04-21得票数 0

回答已采纳

1回答

为什么滚动列表视图会大大增加内存使用量？

、、

我有一个列表视图，它可能包含15行。每行(列表项)包含2个文本字段。当我第一次创建listview时，几乎没有内存使用，但在我触摸它滚动的那一刻，内存使用量增加了大约2MB。我正在重用视图，所以这不可能是它。有什么想法吗？

浏览 0提问于2012-04-12得票数 2

回答已采纳

3回答

正在删除sharepoint列表中的记录

、、

我要删除sharepoint列表视图中的记录。这应该只是一个逻辑删除，实际数据本身不应该被删除。如何做到这一点呢？请给出建议

浏览 1提问于2009-12-09得票数 1

3回答

使用SqlDataReader将数据行返回到List<string>

、、

我正在尝试创建一个通用的SqlDataReader，它将一个包含33列的表转换为一个列表。我希望每个列表项包含每行的所有33个列值。我更喜欢使用列表而不是datatable，因为我需要进行

浏览 2提问于2016-06-27得票数 4

回答已采纳

1回答

如何从网络访问列表，并在设备上将该列表显示为列表控件

、、

我想创建一个列表控件从csv/txt文件，我已经托管在我的网站上，CSV/txt可以编辑，以添加新的项目(在行中)每行有4列，标题-(行的第一列)当用户单击列表项时，将打开一个页面，其中显示该单独页面中的所有

浏览 1提问于2011-11-27得票数 0

1回答

使用CursorAdapter填充的列表视图中的OnClickListener

、

我有一个列表视图，每行有2个按钮。我正在使用cursoradpater来填充列表。我还在newview() bindview()上使用视图持有模式。我的问题是:在知道按钮的操作与列表项本身的操作不同的情况下，我应该将按钮的点击侦听器放在哪里？我要保留onListItemClick吗？

浏览 1提问于2010-11-19得票数 0

回答已采纳

7回答

在wkhtmltopdf中使用Flex/CSS

、、

我已经使用下面的答案成功地创建了一个列表，并在我的页面上使用了flexbox 我需要用这些数据创建一个PDF，我使用的是wkhtmltopdf ()，它也很好，但是生成的PDF将我所有的列表项都列在1列中，而不是每行3项。看起来，当PDF生成发生时，CSS没有被处理，任何洞察力都是值得赞赏的。

浏览 0提问于2019-07-13得票数 30

回答已采纳

1回答

如何将数组列表中的所有元素显示到listview？

、、

我有这个arraylist的代码：public List<String> price = newArrayList<String>(); 你能教我如何将arraylist的所有元素显示到一个两列的列表视图中吗？我也想通过一个新的意图来展示它。= new Intent(main.this, Fina

浏览 0提问于2012-09-30得票数 0

3回答

请解释数组适配器及其用途。甚至更好

更好的是，有人能逐点解释这个程序吗？

浏览 1提问于2010-11-29得票数 12

1回答

Sharepoint:在将新项目添加到列表时建立相关记录

、、

在列表中的项之间实现父子层次结构的最佳方式是什么？.当用户使用表单将新项添加到列表中时，他们应该可以选择要添加的新项是否具有另一个相关项这里的主要问题是，在列表中建立此层次结构的最佳方式是什么？另外，所有的项目都在同一个列表中，那么我们如何将列表链接到

浏览 0提问于2013-04-12得票数 0

2回答

作为一个库在android中创建自定义列表视图。

、、、、

我们希望使用适配器创建一个列表视图，并且希望在适配器之外设置列表项的属性。例如，列表视图包含200行和14列，然后我们需要使用适配器中的对象正在创建的基于屏幕中显示的项的adapter.Here创建列表项。在创建适配器之后，在外部适配器之后，我们想要放置getter，项目198的setter表

浏览 0提问于2013-04-04得票数 0

2回答