简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Die Schwierigkeit, die Karten zu ordnen, bleibt bestehen
P粉766520991
P粉766520991 2023-09-10 14:31:47
0
1
432

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>

P粉766520991
P粉766520991

Antworte allen(1)
P粉574268989
P粉5742689892023-09-11 00:19:09 1 Etage

尝试将它们放在一个 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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！