首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当在div上使用ngFor时,如何在angular2中自动将项目打包成两列?有没有办法只用CSS就能做到这一点?

在Angular 2中,可以使用ngFor指令在div上循环渲染项目,并且可以通过CSS将项目打包成两列。

首先,在HTML模板中,使用ngFor指令循环渲染项目,并将项目包裹在一个父容器中,例如一个div元素。

代码语言:html
复制
<div class="container">
  <div *ngFor="let item of items" class="item">{{ item }}</div>
</div>

然后,在CSS样式文件中,可以使用CSS的列布局(column layout)来实现将项目打包成两列。可以通过设置父容器的列数和列宽度来实现。

代码语言:css
复制
.container {
  column-count: 2; /* 设置列数为2 */
  column-gap: 20px; /* 设置列之间的间距 */
}

.item {
  break-inside: avoid; /* 防止项目被分割到不同的列中 */
}

这样,使用ngFor指令循环渲染的项目就会被自动打包成两列显示。

优势:

  • 使用ngFor指令可以方便地循环渲染项目。
  • 使用CSS的列布局可以实现自动将项目打包成多列,无需手动计算和布局。

应用场景:

  • 当需要将一组项目按照列布局展示时,可以使用这种方法。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体选择产品时需要根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 模板语法二 顶

这里我们看到NgIf守护个。 currentHero名称仅在有currentHero出现。 nullHero从不显示。 <div *ngIf="currentHero !...ngFor指令迭代由父组件的heroes属性返回的heroes,并在每次迭代期间hero设置为列表的当前项目。 要访问hero的属性,请参考ngFor宿主元素(或其后代内)的hero输入变量。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代项目的从零开始的索引。 您可以捕获模板输入变量的index,并在模板中使用它。...*ngFor和trackBy NgFor指令可能表现不佳,特别是在大型列表。 对一个项目,删除项目或添加项目的小改动可以触发DOM操作的级联。...接下来的部分介绍这些操作符个:管道和安全导航操作符。 管道操作符(|) 在准备使用绑定之前,表达式的结果可能需要进行一些转换。

30K20
  • Vuejs和其他前端框架的对比

    ,尽管它需要在在构建组件转换为合法的JavaScript和HTML。...则不需要使用setState()之类的方法去改变它的状态,在Vue对象,data参数就是应用数据的保存者。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节对标准有更好的支持。...Polymer Polymer 是另一个由谷歌赞助的项目,事实也是 Vue 的一个灵感来源。Vue 的组件可以粗略的类比于 Polymer 的自定义元素,并且者具有相似的开发风格。...相比之下,Vue 的单文件组件允许你非常容易的使用 ES2015 和你想用的 CSS 预编译处理器。 在部署生产环境,Polymer 建议使用 HTML Imports 加载所有资源。

    3.8K110

    vue.js与其他前端框架的对比

    ,尽管它需要在在构建组件转换为合法的JavaScript和HTML。...则不需要使用setState()之类的方法去改变它的状态,在Vue对象,data参数就是应用数据的保存者。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节对标准有更好的支持。...Polymer Polymer 是另一个由谷歌赞助的项目,事实也是 Vue 的一个灵感来源。Vue 的组件可以粗略的类比于 Polymer 的自定义元素,并且者具有相似的开发风格。...相比之下,Vue 的单文件组件允许你非常容易的使用 ES2015 和你想用的 CSS 预编译处理器。 在部署生产环境,Polymer 建议使用 HTML Imports 加载所有资源。

    4.2K80

    AngularDart4.0 指南- 表单 顶

    一路学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...英雄就业机构使用这种形式来维护关于英雄的个人信息。 每个英雄都需要一份工作。 让正确的英雄与正确的危机相匹配是公司的使命。 这个表格的三个字段个是必需的。...您将在表单添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)选项绑定到powers列表。...你知道如何从早期的页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...对你来说,这很简单: 在(增强的)表单元素定义一个模板引用变量。 在多处的按钮引用该变量。 显示Model(可选) 提交表单目前没有视觉效果。 预期的演示。

    17.5K30

    webpack入门指南

    图中已经很清楚的反应了几个信息: webpack把项目中所有的静态文件都看作一个模块 模快之间存在着一些的依赖 多页面的静态资源生成(打包之后生成多个静态文件,涉及到代码拆分) 2. webpack安装...有没有发现打包的时间已经被大大缩短,并且也只产生了个隐藏文件。...,比如require(‘react’),对象的value表示的是如何在global(即window)访问到该对象,这里是window.React。...", "module-b"], function(a, b) { // ... }); ---- 5.1.3 项目APP代码与公共库文件单独打包 我们在basic/app.js添加如下代码...---- 5.2 如何给文件版本 线上发布为了防止浏览器缓存静态资源而改变文件版本,这里提供种做法: 5.2.1 使用HtmlWebpackPlugin插件 // version/webpack.config.js

    2.3K40

    VUE-webpack

    许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。 ES6的高级语法进行转换编译,以兼容老版本的浏览器。 代码打包的同时进行混淆,提高代码的安全性。...$/, // 通过正则表达式匹配所有以.css后缀的文件 use: [ // 要使用的加载器,这个顺序一定不要乱 'style-loader...8.7.script脚本 我们每次使用npm安装,都会在package.json留下痕迹,事实,package.json不仅可以记录安装的内容,还可编写脚本,让我们运行命令更加快捷。...8.8.打包HTML 之前的打包过程,除了HTML文件外的其它文件都被打包了,当在线上部署,我们还得自己复制HTML到dist,然后手动添加生成的js到HTML,这非常不友好。...$/, // 通过正则表达式匹配所有以.css后缀的文件 use: [ // 要使用的加载器,这个顺序一定不要乱 'style-loader

    88110

    Web程序员们,你准备好迎接HTML5了吗?

    这样问题就大了,如果只用宽度和高度,正常的浏览器里这个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。   ...无法设置滚动条颜色了 解决办法body换成html <!...浏览,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(Firefox,Opera,Netscape)不能识别*; 写句代码来控制一个属性,区别...FORM标签   这个标签在IE,将会自动margin一些边距,而在FFmargin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面个问题,我的css中一般首先都使用这样的样式...> 让firefox与IE兼容 问题的差别在于容器的整体宽度有没有边框(border)的宽度算在其内

    78820

    网页设计另人头疼的浏览器兼容问题

    这样问题就大了,如果只用宽度和高度,正常的浏览器里这个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。   ...无法设置滚动条颜色了 解决办法body换成html <!...浏览,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(Firefox,Opera,Netscape)不能识别*; 写句代码来控制一个属性,区别...FORM标签   这个标签在IE,将会自动margin一些边距,而在FFmargin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面个问题,我的css中一般首先都使用这样的样式...> 让firefox与IE兼容 问题的差别在于容器的整体宽度有没有边框(border)的宽度算在其内

    1.4K20

    译|CSS的间距,前端开发各种设置间距的优点缺点及实例

    CSS网格,可以使用 grid-gap 属性轻松在和行之间添加间距。...用例和实际示例 在这一节,你将回顾一下在日常工作,你在处理CSS项目,会遇到的不同用例。 header 组件 ? 在这种情况下,标题具有logo,导航和用户个人资料。...间距可能在X页,但不在Y页。 我在检查Facebook的新设计CSS首先注意到了这一点。 ? 那是一个 ,内联样式宽度:16px,它唯一的作用是在左边缘和包装器之间增加一个空白空间。...间隔组件的挑战 现在你了解了间隔组件的概念,让我们深入研究使用它们遇到的一些挑战。这是我想到的一些问题: 间隔组件如何在父级内部取其宽度或高度?在水平布局和垂直布局,它将如何工作?...CSS做到这一点相当容易。

    12K10

    最全的CSS浏览器兼容整理

    这样问题就大了,如果只用宽度和高度,正常的浏览器里这 个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。...,特别是当内层对象使用margin 或paddign 。...id与class有什么区别吗 一.web标准是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论可以无限重复, 这样需要多次引用的定义便可以使用他....无法设置滚动条颜色了 解决办法body换成html <!...FORM标签 这个标签在IE,将会自动margin一些边距,而在FFmargin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面个问题,我的css中一般首先都使用这样的样式

    1.6K31

    深入学习下 CSS 间距相关的知识

    如果没有间距,用户很难分清页面上哪些项目内容相关,哪些项目内容不相关。 因此,在本文中,我分享关于 CSS 的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在,让我们开始吧。...在 CSS 网格,可以使用 grid-gap 属性轻松地在和行之间添加间距。...工具应该每个项目包装在其自己的元素。...我在检查 Facebook 的新设计 CSS ,首先注意到了这一点。 我们内联样式div设置为width :16px, 它的唯一目的是在左边缘和包装器之间添加一个空间。...间隔组件的挑战 现在你已经了解了间隔组件的概念,让我们深入了解使用它们的一些预期挑战。以下是我想到的一些问题: 间隔组件如何在父组件获取其宽度或高度?它将如何在水平和垂直布局工作?

    13.4K40

    小智在这3年开发遇到的 CSS 问题及解决方案,有大佬帮他总结好了 !

    在移动设备,浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样当水平空间不够,浏览器会帮我们自动换行。...当 Flex 项目的数量是动态的,不要使用justify-content: space-between 当justify-content: space-between应用于flex容器,它将分配元素并在元素之间留出相等的空间...长单词和链接 当在移动屏幕阅读一篇文章,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...要做到这一点使用auto-fill或auto-fit即可。...简而言之,auto-fill将在不扩展宽的情况下对进行排列,而auto-fit只会在列为空的情况下折叠到零宽度。 8.

    3.7K10

    9个工作日常中非常实用的CSS技巧,一定要进来瞧瞧

    1) 、文本选择颜色 当你访问网站或阅读博客,你经常使用鼠标选择文本,它只是蓝色选择白色文本。你可以通过自定义文本颜色选择使你的网站脱颖而出。 ? 使用选择伪元素为你网站上的文本提供个人风格。 ?...这不是高级编码,但在你的 CSS 只需要一行代码,你就可以实现这一点。 效果如下: ?...6) 、文本居中显示 有时 div 元素居中可能令人生畏,但你只需几行 CSS 即可将任何 div 居中。 ?...我们只用 CSS 就能做到这一点,如果你想在跨浏览器获得全面支持,最好使用 JavaScript 库来制作滚动条。 ?...其实,这个效果的实现也非常简单,你只需要有了这CSS 属性,你就能得到你想要的! ? 结论 这只是 CSS 技巧的一小部分内容,它们可能会让你感到好奇并鼓励你学习更多有趣 CSS 语法。

    1.4K30

    使用这种技巧,可以大大地提高前端布局效率

    在本文中,介绍 CSS 的 wrapper 布局,它们如何工作,如何使用它们以及何时不使用它们。 请注意,在本文中,可能会提到wrapper 和container这个术语,它们的含义相同。...在没有wrapper的情况下,将设计元素划分为是不容易完成的。 在CSS实现 wrapper 目前我们已经了解了wrapper基础知识和优点,接下来我们来具体的看看在 CSS 如何使用它。...为避免此类混淆,建议在这种情况下使用非简写格式 。 现在让我们来添加页边距。在每个项目中,我都准备了一组用于margin和padding的实用工具类,在必要使用它们,考虑下图。 ?...在上面的HTML个wrapper之间有一个元素。 在这里使用!important很好,因为实用程序类的要点是强制属性,通过添加!important,我们可以确保做到这一点。...对于此示例,使用text-align:center足以使内容居中。 对wrapper使用 CSS 变量 只用一种尺寸的wrapper很少。 wrapper的宽度可以小也可以大,具体取决于内容。

    3.9K20

    从零开始使用 Astro 的实用指南

    在我们的项目中,有一些跨页面的共享标记可以作为模板使用,以避免在不同的文件重复它们。为了做到这一点,让我们在 src/layouts目录创建一个 BaseLayout.astro 文件。...我们把index.astro的内容复制粘贴到该文件: image.png 你刚刚完成了你的第一个Astro布局,现在你需要在你的Astro页面中使用它。让我们看看你如何能做到这一点。...要做到这一点,你需要从你的Astro项目的根目录运行构建命令。你可以通过在你的终端运行以下命令来做到这一点: npm run build 项目的最终构建将被默认存储在dist文件夹。...你可以按照Astro网站上的指南[11],看看你如何在不同的部署服务上部署你的项目Netlify、Vercel、Deno等。...然而,使用这些框架的代价往往是在我们的页面上发送大量的JavaScript,即使是简单的静态内容。 有了Astro,我们就能得到者的好处。

    88740
    领券