为什么我的 html 表格 td 卡宽度低于 400px？ （适用于移动设备）
问题描述 投票：0回答：1
我的 td 表中有几张卡。它的宽度突破了400px以下。我找不到解决方案。在其他大型设备上一切都很好。然而，低于 400 像素，卡片就会超出其宽度。这是屏幕截图
我的代码-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards Table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row gx-0">
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Adidas Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">AirBnb Gift Card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Amazon Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">American Express gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Apple gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Athleta</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Adidas</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Bed bath and beyond Gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Best buy gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Banana Republic</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Booking.com gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Costco cash card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Cvs gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Dell gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Disney gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Door dash gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Ebay Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link" target="_blank">
<div class="card">
<h2 class="card-title-font">Footlocker sports gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS-
`
.col-md-6{填充：0;}.card-rate-link{文字装饰：无;}.card-title-font{背景：线性渐变(45deg, #fff, #fff, rgb( 32, 109, 255)) !重要;-webkit-background-clip: 文本 !重要;颜色: 透明 !重要;字体大小: 1.8rem !重要;文本对齐: 居中 !重要;}.table-data{宽度：190px;最大宽度：100%;}.container{最大宽度：820px;}
.card {宽度：100%；最大宽度：190px；高度：214px；背景：#07182E；位置：相对；显示：flex；地点内容：中心；地点项目：中心；溢出：隐藏；边框-半径：20px；
边距：0 自动！重要；}
.card h2 {z-index: 1;颜色: 白色;字体大小: 2em;}
.card::before {内容：''；位置：绝对；宽度：100px；背景图像：线性渐变（180deg，rgb（0,183,255），rgb（255,0,0））；高度：130%；动画：rotBGimg 3s线性无限；过渡：全部0.2s线性；}
@keyframes rotBGimg {来自 {transform:rotate(0deg);}
到{变换：旋转(360deg);}}
.card::after {内容：''；位置：绝对；背景：#000；；插入：5px；边框半径：15px；}
@media 屏幕和 (max-width:450px) {.card{height: 195px;padding: 5px;}.card-title-font{font-size: 1.6rem !important;}}@media 屏幕和 (max-宽度：350px）{.card-title-font{字体大小：1.5rem！重要;}}`
我希望所有移动设备的卡片尺寸相同。
1个回答
0
投票
投票
将
min-width:150px.card它会起作用的。
祝你好运。
最新问题
- 如何将空手道测试结果输出到自定义文件夹而不是目标？
- SQL VERTICA 按间隔分组
- R：setGeneric 具有两个不同的 S4 类（B 继承 A），具有相同的方法名称和签名
- 在 iOS 框架中嵌入 .dylib
- 需要多个字符串
- 我需要为 .net mvc 项目中使用的 ckeditor 使用下划线工具选项
- Ortools 无法评估 LinearExpr 边缘情况
- React DOM 渲染组件时崩溃
- “.net Core 托管”Blazor WASM 解决方案 Web API 项目上的 Swagger UI
- 在 VS2005、VS2008 下 C++ 的 EXE 速度； VS2010编译器
- 如何在将鼠标悬停在 vega lite 中的图例符号上时将完整的图例标签显示为工具提示
- wdk ddk 编译器与 std::string 和 std::wstring 的问题
- 优先级队列不理解如何跟踪算法
- Azure Blob 自定义角色
- varnish 无法占用 ec2 机器上的 80 端口
- SwiftUI - onTapGesture 中绑定变量的比较（切换网格中行的选择）
- 有没有可以编译C++或C的库
- 我的 CS50 第 2 周的拼字游戏解决方案与符号作斗争。想不通为什么
- 我可以计算某个值的百分比并总结每个采样日期的此信息吗？
- 如何设置 Minecraft Villager 实体到某个位置的路径？即使用 Spigot API 让生物步行到特定地点
© www.soinside.com 2019 - 2024. All rights reserved.