如何获得每行显示三个项目并均匀分布的布局soi？
要实现每行显示三个项目并均匀分布的布局，可以使用以下方法：
- 使用CSS的Flexbox布局：Flexbox是一种强大的布局模型，可以轻松实现均匀分布的布局。首先，将包含项目的容器元素设置为display: flex，并且设置flex-wrap: wrap，这样项目会自动换行。然后，给每个项目设置flex-basis属性为33.33%（或者使用calc()函数计算），这样每行就会显示三个项目，并且均匀分布。
示例代码：
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 33.33%;
}
</style>
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
<!-- 其他项目 -->
</div>- 使用CSS的Grid布局：Grid布局也是一种强大的布局模型，可以实现每行显示三个项目并均匀分布的效果。首先，将包含项目的容器元素设置为display: grid，并且设置grid-template-columns属性为repeat(3, 1fr)，这样每行就会显示三个等宽的列。然后，给每个项目设置grid-column属性为span 1，这样每个项目就会占据一列。
示例代码：
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
grid-column: span 1;
}
</style>
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
<!-- 其他项目 -->
</div>以上是两种常用的方法实现每行显示三个项目并均匀分布的布局。根据具体情况选择适合的布局方式即可。
相关·内容
1回答
我一直在尝试找出一种方法来显示每一行中的三个项目，并使用react js和bootstrap将它们均匀地分开。 我今天已经尝试了几个小时了，但我发现如何在页面上整合网格布局时遇到了麻烦。我让它在没有间距的情况下在每行渲染不同数量的3-4个项目，这会造成混乱的外观。但我不想这样。我想渲染3个项目，每行之间的间距。</
浏览 21提问于2019-01-08得票数 0
回答已采纳
1回答
我想显示像magento 那样的网格视图目前，我正在使用这段代码，并且每行显示使用这一单行
<?
浏览 0提问于2013-01-29得票数 0
回答已采纳
3回答
我有一个布局，按钮放置在屏幕上，我希望如果屏幕上有更多的空间，那么按钮应该是每行三个，无论他们得到什么空间，他们的大小也应该调整屏幕和我希望每行最多三个按钮在屏幕的中心。现在我已经使用线性布局的每一行的两个按钮，请指导我如何使可调按钮，所以如果屏幕尺寸很大，它应该显示三个按钮最大，如果尺寸很小，它应该只显示两个按钮每行<
浏览 2提问于2014-04-24得票数 0
我有一个简单的网格缩略图，我正在布局-缩略图项目是动态生成的，并通过wordpress循环输出。对于每个缩略图，我使用了Bootstrap 3列类中的三个：.col-xs-4、.col-md-3和.col-lg-2，这样在小屏幕上有3个缩略图，在中屏上有4个缩略图，在大屏幕上有6个缩略图。因为每行缩略图的数量取决于屏幕大小，所以我不能像往常那样根据循环计数器以预定义数量的缩略图打开和关闭div.row。所以我想知道<
浏览 3提问于2013-12-11得票数 0
2回答
我一直在做一个项目，在这个项目中，所有最近的用户活动都将显示在自定义的文本视图中。请参考下面的截图，它取自Fancy App：我很想知道他们是如何做到的。2.每条评论的动态高度视图。
3.每行项目有4个文本视图:第一个是用户名，第二个是“评论”，第三个是产品。如果产品
浏览 0提问于2014-03-11得票数 1
1回答
我有一个ArrayList<myObject>和一个带有personal ArrayAdapter<myObject>的ListView，使用的是一个生成Button列表的膨胀视图。它可以工作，但每行一个按钮相当耗费布局^^
我想知道是否可以每行显示两个或更多项(按钮)，以及如何做到这一点？我想过将我的项目分成两个列表(偶数和奇数)，但为了获得更好的用户体验
浏览 0提问于2011-10-10得票数 1
回答已采纳
我在水平堆栈视图中有三个按钮，并且我已经设置了自动布局，以便它们根据特定的标准显示。
例如，第一个按钮将是堆栈视图宽度的40%，第二个按钮与第一个按钮具有相同的宽度，第三个按钮采用剩余的宽度。按钮的高度与堆栈视图相同。它们都是均匀分布的，每隔8个点。堆叠视图的分布设置为“等间距”，对齐设置为“居中”。当我决定隐藏前两个按钮，但仍然希望第三个按钮出现在具有相同宽度<
浏览 2提问于2015-12-28得票数 0
我在一个表中动态地显示一个项目列表。为了确保表中的每个项目均匀地分布在父对象中，我使用.33f权重对每个项目调用.setLayoutParams() (每行有三个项目)。但是，这些项目仍然不能在行中均匀分布。row.addView(purchasePrice);
}
}
我的活动<
浏览 3提问于2017-01-28得票数 0
回答已采纳
1回答
我正在尝试使用PHP获得以下布局我的代码：这会使每行上的第一个项目变大。如何使第一行的第一个项目变大，第二行的最后一个项目变大，第三行的第一个项目变大，依此类推，就像在布局示例中一样？注意:我必须使用$s
浏览 22提问于2019-11-01得票数 0
回答已采纳
3回答
我想在我的Android应用程序中使用旋转器作为视图切换控制器，就像本地邮件应用程序(参见的第2部分)。到目前为止，我已经成功地将旋转器放在操作栏中，并通过查看Android的示例代码来填充字符串数组(请参阅屏幕快照)。我的问题是：
如何使旋转器显示两行，一条用于标题，另一条用于字幕？就像本地邮件应用程序一样。为什么旋转器中的</
浏览 3提问于2012-07-31得票数 1
回答已采纳
我有一个UICollectionView，它是一个UIScrollView的subview (这是必需的，因为集合视图上下的东西。集合视图每行显示三个项目，开始时只显示两行。前五个项目是实际项目，最后一个项目是“查看更多”项目。
当按下最后一项时，我会更改显示的项数并更新集合视图...layoutIfNeede
浏览 3提问于2015-08-13得票数 1
2回答
例如，我想将9个元素(其他布局或图像视图)放在每行三个元素中。在html中，我会将每个div的高度/宽度都设置为33.3%，并使用word。谢谢大家！
浏览 1提问于2014-05-30得票数 0
1回答
我想创建一个文件夹的布局。在大屏幕上，它有三列，包含均匀分布的图像。我知道这个jsfiddle，在视图大小调整的时候缩小了整个容器，但是我将实现媒体查询，这样图像就会变得50%大小等等。在较小的视口上，因此，行上将有两个图像，而不是三个。因此，考虑到这一点，创建此布局的最有效方法是什么，以便图像之间具有良好的均匀填充，无论视口大小如何。以下是我所指的视口大小的细分
浏览 0提问于2014-11-14得票数 0
回答已采纳
我为标题名称道歉-我不知道该如何标记这个名称。(一行显示三个项目)我尝试使用return false来中断each函数。我才意识到，如果每个.row有
浏览 0提问于2016-05-09得票数 0
2回答
我是CSS的新手，正在尝试弄清楚如何获得类似于两列布局的东西。现在，每个块都以正常的流程显示在页面上(也就是每行1个块。但我需要每行有2个区块。我不想使用表，那么我有哪些选项来显示2个块，而不是每行显示1个块。
当我使用绝对定位时，它们都是叠加在一起的。我应该不使用任何定位吗？
浏览 1提问于2014-10-15得票数 0
3回答
对于一个网站，我使用了网格布局。我想要的是将每行的所有项目存储在一行中。我该如何实现这一点？我在这个项目中使用Javascript。
浏览 0提问于2015-09-16得票数 0
我正在做一个自由职业者的项目，它捕获音频文件，运行一些傅立叶分析，并输出三个图表(x-y图)。每个图表大约有3000个数据点，我计划在浏览器中使用High Charts显示这些数据点。对于存储和访问如此多的数据，您推荐使用什么数据库技术？我应该在数组中存储点还是在多行中存储点？我也在考虑Mongo。我的计划是使用Rails，所以我希望同时使用一个数据库来处理数据和身份验证。我还没有处理过访问单个页面的这么多数据的查询，而这很可能只是一个很小的<
浏览 1提问于2013-02-02得票数 0
我用baseadapter在我的baseadapter的布局文件中显示一些项目，我有一个RelativeLayout，我想在列表视图的点击中显示隐藏这个布局。我写了一些代码，它可以显示/隐藏布局，但它不是enough.at的时刻，这个布局显示是可能的每一个项目的点击，但我want.for的例子，如果我
浏览 2提问于2014-07-03得票数 0
我正在帮助一位艺术家维护她的网站，并继承了一些非常过时的代码。我已经移动了许多冗余的通用代码来包含文件，现在我正在努力从内联样式转移到更多的CSS驱动样式。对于画廊页面，例如，使用了大量的内联样式来强制当前布局。我更倾向于将其完全替换为CSS，它在"content“div中显示以下表格布局：图像我想居中对齐的图像描述和购买按钮相对于图像，如果可能的话。然后在每行的<
浏览 0提问于2010-03-18得票数 0
1回答
我很难弄清楚如何在每一行中显示任意数量的列，并在大小布局中保持其响应性。我想在large中做4列，在medium中做2列，在small中做1列。(见下面我的线框)。但是，这些列需要包装在div.row中。这一要求意味着我有以下两种情况之一：
Case #1 ()我每行有2个元素，而
浏览 3提问于2013-12-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
