开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让我的卡片在html/css/js中相邻？

要让卡片在HTML/CSS/JS中相邻显示，你需要使用CSS来控制卡片的布局。以下是一个简单的示例，展示了如何实现这一点：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
    </div>
</body>
</html>

CSS (styles.css)

.card-container {
    display: flex;
    flex-wrap: wrap; /* 允许卡片换行 */
    gap: 16px; /* 卡片之间的间距 */
}

.card {
    flex: 1 1 calc(33.33% - 16px); /* 每个卡片占据1/3宽度，减去间距 */
    min-width: 300px; /* 最小宽度 */
    padding: 16px;
    box-sizing: border-box;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

解释

HTML结构：
- 使用一个div容器包裹所有的卡片，类名为card-container。
- 每个卡片也是一个div，类名为card。

CSS布局：
- .card-container使用display: flex来启用Flexbox布局。
- flex-wrap: wrap允许卡片在空间不足时换行。
- gap: 16px设置卡片之间的间距。
- .card使用flex: 1 1 calc(33.33% - 16px)来确保每个卡片占据大约1/3的宽度，并减去间距。
- min-width: 300px确保卡片在较小屏幕上也有足够的宽度。

应用场景

产品展示：在电商网站或应用中展示多个产品卡片。
新闻列表：在新闻网站中显示多个新闻卡片。
用户信息：在社交平台中显示用户信息的卡片。

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

卡片重叠：
- 确保.card-container的宽度足够大，或者使用flex-wrap: wrap来允许换行。
- 检查是否有其他CSS规则影响了卡片的布局。

卡片间距不一致：
- 使用gap属性来统一设置卡片之间的间距。
- 确保没有其他CSS规则覆盖了这个设置。
响应式设计问题：
- 使用媒体查询来调整不同屏幕尺寸下的卡片布局。
- 使用媒体查询来调整不同屏幕尺寸下的卡片布局。

通过以上方法，你可以轻松实现卡片在HTML/CSS/JS中的相邻显示，并且具有良好的响应式设计。

相关搜索:如何让CSS在HTML中显示如何让加载画面消失？html css js HTML/CSS如何让我的页脚卡在底部？我如何让这些单选按钮在内联中彼此相邻？如何让图像显示在HTML/CSS中？如何在css中让html表格边框相互合并？如何在css中定位我的html列？如何让Javascript方法在我的HTML中打印如何让我的内容在CSS中偏爱左列如何使我的照片幻灯片在页面打开时显示，而不是在我单击点HTML CSS JavaScript时显示？我如何*真正*证明HTML + CSS中的水平菜单？如何让html列表呈现在我的头文件中？如何让Wordpress在CSS中读取我的媒体查询？如何在html、css和js中创建动画？当我从HTML，CSS，JS转换成JSX，CSS，JS时，如何在react中链接我的javascript文件？如何让angular js表达式考虑来自api的css值并将其应用到它的卡片上。如何让我的.css和.js文件与加载在安卓WebView中的html代码一起工作如何将CSS和JS合并到HTML中我有一个奇怪的html和css结构，如何让我的聊天消息对齐到底部？CSS:部分透明的图像在网格中显示它们后面的相邻图像，我如何让它们完全隐藏在自己的div之外？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

你未必知道的49个CSS知识点

作者：老姚，《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif 本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。...鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。...【相邻兄弟选择器】?相邻兄弟选择器之常用场景 ? 12.【模态框】?要使模态框背景透明，用rgba是一种简单方式 ? 13.【三角形】?css绘制三角形的原理 ? 14.【table布局】?...CSS动画其实是可以暂停的 ? 30【object-fit】?图片在指定尺寸后，可以设置object-fit为contain或cover保持比例 ? 31【鼠标状态】?...可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开 ? 37【进度条】?使用渐变，一个div实现进度条 ? 38【打印】?

1.2K1 0

你未必知道的49个CSS知识点

作者：老姚，《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif 本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。...鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。...【相邻兄弟选择器】?相邻兄弟选择器之常用场景 ? 12.【模态框】?要使模态框背景透明，用rgba是一种简单方式 ? 13.【三角形】?css绘制三角形的原理 ? 14.【table布局】?...CSS动画其实是可以暂停的 ? 30【object-fit】?图片在指定尺寸后，可以设置object-fit为contain或cover保持比例 ? 31【鼠标状态】?...可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开 ? 37【进度条】?使用渐变，一个div实现进度条 ? 38【打印】?

1.5K2 0

ArcGIS JS API 4.15实现地图加载图片(优化版)

主要介绍如何用ArcGIS JS API 4.15实现在二维地图中添加图片的操作。...上一篇文章已经介绍了如何添加图片的四种方法，但是添加到地图上的图片在拖动时有些卡顿，所以本文又提出了另一种优化的方法。...但是最近客户又有了新需求，因为我们在之前的文章中通过扩展图层来实现图片添加后，如果图片中某一处的信息比较丰富，在地图缩放的一瞬间如果我们拖动地图的话，那部分的图片会有卡顿。...之前文章的地址如下：《ArcGIS JS API 4.14实现地图加载图片》。...那这样一来，在图片上信息比较丰富的地方绘制的时候就比较慢，肯定会有一丢丢的卡顿，尽管后期使用双缓冲技术也没有得到优化，所以这篇文章我们采用另一种方式来实现地图叠加图片。

2.4K2 0

作业-原生js完成轮播图与悬停

css 我们简单加入css，让效果看起来很美观一些，这里不会讲css，我自己也是瞎折腾的。...下面我们进入js实现功能的环节。 js 我们先简单构思一下如何让图片自动轮播假设我们现在有一个定时器，我们传入一个功能，他可以自动切换图片的名称。...那么就是一个简单的将1改变为2的过程并循环，我们如何去判断这个循环的次数呢，这里有很多种思路。为了效果一致且方便维护，我将列表的长度作为我图片的数量即可。...background-color: red; color: red; } 如何让数字高亮呢，这很简单，只要在改变图片的图示让数字定位到这个css中的...但是就有一个难题了，如何让它回退呢，也很简单，但是很多人想不到，让我们定时器第二次调用函数的时候判断i是否为1，不为1说明上一次变过色，我们让它回去css中的out即可。

8K3 1

200行Html5+CSS3+JS代码实现动态圣诞树

大家好，又见面了，我是你们的朋友全栈君。...一、前言最近CSDN的热榜出现了很多用Python、C/C++等编程语言实现的圣诞树，发现很少用前端的，这篇文章用前端三大杀手Html5、CSS、Js来实现动态圣诞树。...，在JS代码的第五行内更改内容树的动态旋转通过js实现、主干是html5、样式CSS 三、步骤 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用...VSCode 2.配置插件三个插件对应的功能：改写标签后自动完善切换成中文页面让代码在网页中打开，默认键Alt+B 3.构建三个文件在桌面新建一个空的文件夹，用VSCode打开在...VSCode新建三个文件 index .html domtree.css domtree.js （文件名字要和这个一样，不然会出错），保存别忘了对于文件的层级问题，三个index .html

4.7K2 0

UIWebView与JS的交互

要实现这样一个需求：按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本，需要自己拼写完整的HTML。...除此之外，还需要禁用获取的HTML文本中自带的标签自动加载，并把下载图片的操作放在native端来处理，并通过JS将图片在Cache中的地址返回给UIWebview。...技术难点也有两个：1、如何让HTML文本onLoad的时候，禁用自身的图片加载而是从本地获取图片？2、如何把native端下载好的图片返回给网页？... html> 我们让的时候去调用JS中的 onLoaded()函数。...并且把下载完的图片在cache中的地址返回个JS。

3.7K2 0

CSS技巧和经验

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中 #test { display: table-cell; /* vertical-align只支持内联（inline）元素或表格单元格...如何让某个元素充满整个页面 html, body { height: 100%; margin: 0; } #test { height...如何让某个元素距离窗口上右下左4边各10像素 html, body { height: 100%; margin: 0; } #test {...CSS中的简单运算 // 通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的 #test { background-position...-incredibly-useful-css-tricks-you.html

2.4K7 0

「css基础」Transforms 属性在实际项目中如何应用？

接下来声明动画名如何让这个静态的小球动起来呢，我们需要借助css的动画属性，我们来定义一个名为jump的无限循环动画，先快后慢，然后反方向执行一遍动画，1.5s循环一次，代码如下： .loader {...infinite; } @keyframes rotate { to { transform: rotate(360deg); } } 接下来让我的动画更加生动，我们让牵动线圈运动的小实心圆更有趣...接下来我们来定义容器的样式，让三张图片在页面居中： .container { margin: 10px auto; } 然后我们定义每张图片在容器中左浮动，排成一行，并定义图片的宽与高： .photo...为我们提供了强大的动画功能，甚至不需要任何JS我们就可以于创建有趣和美丽的动画效果。...因此，应该利用CSS动画为用户提供更好的用户体验，而不是耍酷，用多了反而过犹不及。在本文中，我们已经了解了如何将CSS的Transforms变换属性运用到真实的项目中。

3.3K3 0

动效案例：纯手工写一个滚动视差效果

当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。...脚本动态更新相关图片在界面的位置，这是我们制作滚动视差的关键。...五、创建HTML结构 HTML结构非常简单，我们依次排列图片，放在 section 标签区域即可，示例代码如下：让浏览器出现滚动条，示例代码如下： @import url('https://fonts.googleapis.com/css?...: 10em; z-index: 1; } #road { z-index: 2; } 到这里我们的CSS部分就结束了，是不是很简单呢，最后我们来编写JS脚本。

2.1K3 0

移动端H5页面开发坑点指南

如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用...:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码: document.addEventListener('touchstart', function...文件中同时设置一下input的属性,如下: input { -webkit-user-select:auto; //webkit浏览器 } html5碰到上下拉动滚动条时卡顿.../慢怎么解决首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。...解决方案是： 1.让html和body固定100%（或者100vh）， 2.然后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling

3.1K1 0

webpack-图片路径问题

webpack 打包图片路径问题，webpack 打包之后给我们的都是相对路径，但是正是因为是相对路径，所以会导致在 html 中使用的图片能够正常运行，在 css 中的图片不能正常运行例如, 打包之后的路径是..., images/BNTang.jpg, 那么在 html 中, 会去 html 文件所在路径下找 images, 正好能找到所以不报错, 但是在 css 中, 会去 css 文件所在路径下找 images..., 找不到所以报错，目录结构示例如下：|---bundle |---css |---index.css |---js |---index.js...|---images |---BNTang.jpg |---index.html解决方案在开发阶段将 publicPath 设置为 dev-server...服务器地址：图片然后在利用 devServer 打包，然后在访问一下打包之后的效果如下图所示：图片然后在查看图片访问路径地址如下：图片在上线阶段将 publicPath 设置为线上服务器地址：图片图片我正在参与

4450 0

HTML和CSS

每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？声明位于文档中的最前面的位置，处于 html> 标签之前。...你如何理解HTML结构的语义化？...25. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？...CSS中link和@import的区别是： Link属于html标签，而@import是CSS中提供的在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的...答：结构层 Html 表示层 CSS 行为层 js。 43. Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、<!

5.4K3 0

css笔记 - 张鑫旭css课程笔记之 margin 篇

margin - 人若犯我，我必犯人！一、margin与容器尺寸的关系 relative可定位，但是不改变容器尺寸和占据的空间 margin不同，margin也在盒模型中。...如何利用margin重叠？ 1. margin重叠的原因对于文字排版阅读的考虑，使得连续段落之间，首尾项和其他兄弟标签的比例不变。...，我的高度也不会自动填充整个父元素的高度，就像内联元素不会自动填充父元素的宽度一样，所以auto没有办法计算我的高度剩余空间，也就不会有高度自动填充这一说了。...> 五、垂直方向的居中： 1.可以改变流的方向为垂直方向的：(css3) writing-mode: vertical-lr; 这种方法会让垂直的margin auto起作用，但是水平方向的不会起作用了...总结一批：利用margin负值等于图片宽度，可以让右边图片跑到左边文案之上。

2.6K2 0

「css基础」Transforms 属性在实际项目中如何应用？

本篇文章笔者将带着大家完成以下几个例子：内容垂直居中对话框气泡弹跳的小球转动的线圈（SVG）翻转的卡片本篇文章预计15分钟内容垂直居中在前端开发过程中，内容居中是常见的需求。...接下来我们来定义容器的样式，让三张图片在页面居中： .container { margin: 10px auto; } 然后我们定义每张图片在容器中左浮动，排成一行，并定义图片的宽与高： .photo...为我们提供了强大的动画功能，甚至不需要任何JS我们就可以于创建有趣和美丽的动画效果。...请记住，您的网站是为用户而不是为自己服务的（在大多数情况下，无论如何）。因此，应该利用CSS动画为用户提供更好的用户体验，而不是耍酷。...小节在本文中，我们已经了解了如何将CSS的Transforms变换属性运用到真实的项目中。通过本文，我们已经了解了如何在页面上垂直对齐元素，对话框气泡，弹跳和旋转的加载动画，以及如何实现翻转动画。

2.6K0 0

网页|Zepto框架层次选择器

在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。...3）相邻元素选择器 js"> //相邻元素选择器 $("#d1+p").css("background-color...相邻元素选择器选择的是元素之后的相邻对应元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到只有p2变成了粉色。.../zepto.min.js"> //同辈元素选择器 $("#d1~p").css("background-color

8461 0

(第一版)知识点

Photoshop、FW（测量、剪裁、编辑） 2>语言（至少花95%的时间）至少要学习： html css js这三种基本的语言 HTML 超文本标记语言语言：和浏览器认识的语言...height: 100px; background: red; Javascript：脚本语言（是一种可以动的行为）搭建一个网页相当于搭建一个房子 html css js(冬暖夏凉) 案例：onclick...="this.style.width='800px';this.style.height='800px';" （让页面动起来）第一章常用标签 Html标签：作用所有html中标签的一个根节点。...--我是html里面的注释--> /*我是css里面的注释*/ Photoshop相关的操作（切图、测量、对图片简单的处理）首先下载ps软件如何得到一张图片 1>设计师给的ps图片 2>印屏幕：...不支持； 7.overflow:hidden 清浮动方法；问题：需要配合宽度或者 zoom 兼容IE6 IE7等一些问题定位如何让

1K2 0

17个场景，带你入门CSS布局

方法1: js配合rem rem 是尺寸单位。 1rem = 根元素（即html元素）的字体大小值。当根元素的字体大小变化，1rem的大小也会跟着变。...为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为宽度为 750px 的设计稿中的 100px。...CSS 的position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。...下面代码实现了返回顶部的按钮样式： HTML: 返回顶部 CSS: .back-to-top...图片在左边，文字在右边。给图片设置 float:left。 ? 图片在右边，文字在左边。给图片设置 float:right。 ? 在 IE6 流行的年代，浮动是主流的布局技术。

2.7K2 0

我不知道你知不知道我知道的伪元素小技巧

伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。...在开发中如果我们遇到类似这样的需求我们？我们应该如何只用一个简单的css元素去实现他？方案：一个p标签,左右两条线用before和after画出来： ?...3.计数器动态的计算商品的数量，我们经常会借用js来实现；我想告诉css也能实现这个效果，他比js用起来简单多了 ?...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形有没有办法只让容器的形状倾斜而保持其内容不变呢...梯形标签页在网页中我们经常见到梯形形状的标签页，常见的技巧都是比较杂乱，或者说难以维护的，那他们是如何实现的呢？

9872 0

我不知道你知不知道但前端NEXT知道的伪元素小技巧

伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。...在开发中如果我们遇到类似这样的需求我们？我们应该如何只用一个简单的css元素去实现他？方案：一个p标签,左右两条线用before和after画出来： ?...3.计数器动态的计算商品的数量，我们经常会借用js来实现；我想告诉css也能实现这个效果，他比js用起来简单多了 ?...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形有没有办法只让容器的形状倾斜而保持其内容不变呢...梯形标签页在网页中我们经常见到梯形形状的标签页，常见的技巧都是比较杂乱，或者说难以维护的，那他们是如何实现的呢？

1K7 0

【动画进阶】神奇的 3D 卡片反光闪烁动效

最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下：非常有意思酷炫的效果。...而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果：该效果的几个核心点：卡片的 3D 旋转跟随鼠标移动效果如何让卡片在 Hover 状态，有不同的光泽变化如何让卡片在...卡片的 3D 旋转跟随效果 OK，接下来，如何实现 3D 卡片效果呢？这个效果之前在让交互更加生动！有意思的鼠标跟随 3D 旋转动效实现过一次，我们复习一下。...我们来看一下，假设我们的 HTML 结构如下：得到这样一个图形：这里，body 的范围就是整个鼠标可活动区域，...变量，其应用在渐变代码中。

3432 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭