suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die Schwierigkeit, die Karten zu ordnen, bleibt bestehen

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粉766520991P粉766520991443 Tage vor490

Antworte allen(1)Ich werde antworten

  • P粉574268989

    P粉5742689892023-09-11 00:19:09

    尝试将它们放在一个 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>

    Antwort
    0
  • StornierenAntwort