Ich bin HTML-Neuling und habe versucht, eine Website für meine Freunde zu erstellen, auf der ich Karten zur Anzeige von Informationen erstelle. Da ich mehrere Karten in unterschiedlichen Abschnitten erstellt habe, möchte ich alle Karten in ihren jeweiligen Abschnitten ausrichten, hatte aber Probleme.
Zuerst habe ich Inline-Block ausprobiert, weil ich vermutete, dass alle Elemente zusammen einen Block ergeben sollten, aber nichts ist passiert. Als nächstes habe ich versucht, eine Tabelle zu erstellen und die Karten in der Tabelle aufzulisten, aber auch das hat nicht funktioniert. Teilweise gelang es, andere Karten wurden jedoch verkleinert und der Text lief über. Wie kann ich es reparieren?
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #fafafa;
color: rgb(32, 32, 32);
margin: 0;
}
header {
position: sticky;
top: 0px;
}
nav {
background-color: #fafafa;
margin: 0;
width: 100%;
}
ul {
text-align: center;
}
li {
display: inline-flex;
text-align: center;
}
a {
float: right;
list-style-type: none;
text-decoration: none;
color: rgb(0, 0, 0);
background-color: #fafafa;
padding: 40px;
}
a:hover {
float: right;
list-style-type: none;
text-decoration: none;
transition-duration: 0.8s;
font-size: 25px;
}
.Fcard1 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 16%;
margin-left: 32px;
}
.Fcard1:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.FCcontainer1 {
padding: 2px 16px;
}
.Fcard2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 16%;
margin-left: 32px;
}
.Fcard2:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.FCcontainer2 {
padding: 2px 16px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- link rel="stylesheet" href="/Home/Home.css" -->
</head>
<body>
<header>
<nav>
<ul>
<li>
<h2>Shoppables</h2>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Settings</a></li>
<li></li>
<li>
<a href="#"><img src="/Home/Home-Images/search_FILL0_wght400_GRAD0_opsz24.png"></a>
</li>
<li>
<a href="#"><img src="/Home/Home-Images/shopping_cart_FILL0_wght400_GRAD0_opsz24.png"></a>
</li>
</ul>
</nav>
</header>
<main>
<table style="width: 100%;">
<tr>
<section class="Featured-Sect">
<h2 class="Featured-Header" style="margin: 32px;">Featured Products:</h2>
<td style="width: 100%;">
<div class="Fcard1">
<img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
<div class="FCcontainer1">
<h2><b>Placeholder</b></h2>
<p>Rrreee.00 USD</p>
</div>
</div>
</td>
<td style="width: 100%;">
<div class="Fcard1">
<img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
<div class="FCcontainer1">
<h2><b>Placeholder</b></h2>
<p>Rrreee.00 USD</p>
</div>
</div>
</td>
</tr>
</section>
</section>
</table>
</main>
</body>
尝试将它们放在一个 div class="input-group" 中：
<div class="input-group"> <td style="width: 100%;"> <div class="Fcard1"> <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%"> <div class="FCcontainer1"> <h2><b>Placeholder</b></h2> <p>$0.00 USD</p> </div> </div> </td> <td style="width: 100%;"> <div class="Fcard1"> <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%"> <div class="FCcontainer1"> <h2><b>Placeholder</b></h2> <p>$0.00 USD</p> </div> </div> </td></div>