如何让我的卡片在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中的相邻显示，并且具有良好的响应式设计。
相关·内容
2回答
这是我的HTML： <div class="container"> <div class="post-module">
浏览 26提问于2020-12-09得票数 1
回答已采纳
1回答
基本上，我已经把一个画廊到我正在制作的网站，它工作得很好。但。图片只需在屏幕的左侧向下滚动。我想让一半的图片在其他图片的右边...这是我的网站截图(用油漆绘制的高科技红色方框显示我想要的一半图片的位置)
<div class="img">
<a target="_blank" href="Gallery&#
浏览 1提问于2014-05-01得票数 0
1回答
IE8的引导程序
、、、
我正在尝试为IE-8浏览器使用Bootstrap CSS。<html> <meta charset="utf-8"> <link rel="stylesheet" hre
浏览 0提问于2015-04-25得票数 2
我是Javascrip和css的新手。我想练习一下。所以我创造了一个按钮。当我点击它时，屏幕上出现了一张新的小卡片。效果很好。现在，我正在尝试执行一个函数，当我单击创建的卡片时，它打开两个输入字段，其中一个是保存按钮，另一个是取消按钮。我知道如何编程“保存和取消”按钮，但我不知道如何通过单击创建的卡片在创建的卡片中制作它们。你们谁知道我怎么能用Js做这件事？<em
浏览 2提问于2016-08-29得票数 0
回答已采纳
5回答
CSS动画点击
、、、
使用常规的JS (而不是JQuery)，我尝试让一些图片在点击后摇动，但它不起作用。JS: document.getElementById("s1_imgB").style.className = "shake"; .shake:hover {....默认情况下，我可以使用以下html获得要抖动的元素。但是，我</
浏览 11提问于2016-12-23得票数 2
回答已采纳
1回答
将变换元素置于其他元素之上
、、、、
我正在学习使用CSS3 3D变换，但我很难将正在变换的元素放在所有其他元素之上。这就是我目前所拥有的：
如您所见，对于三个.row div的层次结构，该站点遵循标准的z索引规则，这意味着第一行的卡片在第二行的卡片后面，依此类推。我尝试向转换脚本(在main.js中)添加行，该脚本选择单击的.card元素上方的.row元素，并将其z索引设置为1000，但是这似乎不起作用。$(this).parents().eq(2).toggleCla
浏览 0提问于2013-02-09得票数 5
回答已采纳
2回答
考虑下面的html代码： <span style="display: inline-block;"><div>Picture><div>Picture - to display at the middle</div>
</span> 当这些跨度<e
浏览 49提问于2019-02-07得票数 0
1回答
我想把“滑动器”放在我的头版上。我可以用html，js，css设置这个插件。但是，我想知道如何在管理中改变这个滑块的图像。当我使用jquery插件时，我希望更改管理区域中的幻灯片图像。你能给我一些提示，以改变图片在管理，是标记在html。
浏览 0提问于2020-11-21得票数 0
回答已采纳
1回答
nodeapp -CSS -pictures -index.hbs -profile.hbsapp.use(express.static(staticFiles))
app.set
浏览 2提问于2020-11-04得票数 0
回答已采纳
我在试着做一个熄灯的游戏。当我点击它们时，我可以让灯打开和关闭，但我想不出逻辑来让相邻的灯也来。例如，如果我单击表的边缘，我应该会看到与我单击的灯光相邻的三个灯光变亮。我在想，这可能与我的click方法中的"this“绑定有关，也许"this”只引用了我点击的那个，而不是相邻的那个。我需要知道，也许如何让它引
浏览 0提问于2010-02-03得票数 0
回答已采纳
1回答
我正在尝试让箭头从完全相同的点开始，并改变箭头的旋转。下面是我用HTML/JS/CSS编写的代码示例，以及我遇到的情况的图片。关于如何使这些箭头的图片在原点重叠得更好，有什么想法吗？HTML/JS
content.innerHTML= '<div id = "contain"><img class = "arro
浏览 0提问于2021-10-25得票数 0
我的代码中有一个文本框和一个按钮。我想让用户输入一个文本并点击按钮。如果是这样，将使用用户输入的文本创建卡片，并使用json文件设置卡的背景色。但是在我的代码中，如果用户第二次点击按钮，先前创建的卡片就消失了，一个新的卡片正在被创建，留下了先前创建的卡片的空间。但是我希望所有的卡片都在一张下面对齐。我认为这可以通过为每一张卡设置不同的ids来使用循环函数。不幸的是，我不能正确地做这
浏览 7提问于2019-12-25得票数 0
回答已采纳
2回答
我已经到处寻找我的问题的解决方案-我对编码是新手，并试图使用javascript在我的网站上插入一个幻灯片。一切正常，只是第一张图片没有显示，是什么原因？我假设答案是与我的css文件中的某些内容有关，但我可能是错的？当我点击我页面底部的圆点时，幻灯片就会工作，图像就会弹出来，它只是得到了第一张图像来显示这是问题所在。>
<script src="slideshow-container.j
浏览 2提问于2018-01-28得票数 1
2回答
我有一个.net核心项目中的css，js和图片在不同的文件夹。
我正在尝试从Index.cshtml调用CSS和JS文件。但是，它没有加载。DOCTYPE html> <head>
//
浏览 1提问于2020-07-19得票数 0
2回答
我想要更改一组照片中的图像的z-index，这组照片绝对定位在body元素中。我喜欢它，这样当我滚动一张图像时，它会使用CSS中的web-kit变换来增加大小。问题是图像在我的HTML文件堆栈中的顺序较高，而在图像顶部的顺序较低。我想有一个脚本，增加一个文件的z-index，以便当我滚动它，它不会出现在后面的相邻照片。我花了一些时间寻找z-index添加文件，因为在我的脑海中，您只
浏览 0提问于2012-03-04得票数 1
1回答
我是用卡片在我的页面上物化的页面如下所示
您可以看到我的卡片内容和描述在我的图像中，我遵循的指南，但它在我的页面中不起作用。>assets/home-user/materialize/css/materialize.css" rel="stylesheet" type="text/css</em
浏览 1提问于2016-11-25得票数 0
回答已采纳
2回答
如何让我的图片在打开页面时垂直加载？我知道如何使用HTML/CSS使div元素淡入页面，但我想知道如何才能像在中那样垂直地替换标题图像
谢谢!如果这个问题太模糊了，很抱歉。如果有人能帮我找到一个我可以使用的codepen或jsfiddle链接，那也会有很大帮助的！
浏览 0提问于2017-03-02得票数 2
回答已采纳
3回答
我有一个组件(我的卡组件)，它是由一张带有类的垫卡组成的。我在另外两个组件中使用这个组件。在组件"A“中，我需要.我的卡宽度为380 In，在组件B中，我需要..my卡的宽度为100%。应用程序在组件A中启动，我的卡宽度为380 in。然后我导航到组件B和。我的卡有100%的宽度，但如果我</
浏览 3提问于2022-05-12得票数 2
我使用jquery插件jcarousel来显示73个缩略图。在脚本准备就绪之前，它会在页面的垂直列表中显示所有缩略图。目前，我正在使用一个脚本，以正确的大小显示图像，一旦一切都加载。我只是想知道这是否是一种好方法，以及是否有更好的方法在jquery完全加载之前隐藏内容？>}); $(window).load(function() {
$(".jcarousel-skin-tango .jcarousel-item img").css({
浏览 4提问于2011-12-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
