Question

我已经开始学习 html 和 css，但我在布局方面遇到了很大的问题，我尝试了 grid 和 flexbox。我想要实现的是：

我尝试使用什么布局

遗憾的是，我的网站如下所示：

我的布局看起来像这样

现在这是我的代码，如果您愿意，请像向脑残人士解释一样进行解释，提前致谢，祝您有愉快的一天。

    <!DOCTYPE html>

<html>
 <head>
  <meta charset="UTF-8"/>
  <meta name"viewport" content="width=device-width", initial-scale="1.0"/>
  <title>PE-ZONA.RO | WEBTOONS </title>
  <link rel="stylesheet" href="../css/styles.css"/>
  <link rel="stylesheet" href="../css/normalize.css"/>
 </head>

<body>
<!-- HEADER - ICONIȚE -->
<header>
 <div class="mhcon">
  <div class="mhconitem"><a href="#">PATREON</a></div>
  <div class="mhconitem2"><a href="#">DISCORD</a></div>
 </div>
</header>

<!-- SIDEBAR-NAVIGATIE -->
<aside>
   <nav>
     <div id="sidebar">
<ul>
 <li><a href="#">WEBTOONS</a></li>
 <li><a href="#">ECHIPĂ</a></li>
 <li><a href="#">ALĂTURĂ-TE</a></li>
 <li><a href="#">BLOG</a></li>
</ul>
  </div>
 </nav>
<aside>

<!-- WEBTOONS -->
<section>
 <div class="content">
  <div class="card">
    <h3>NUME WEBTOON1</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
  <div class="card">
    <h3>NUME WEBTOON2</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
  <div class="card">
    <h3>NUME WEBTOON3</h3> <br>
    <p>DESCRIERE WEBTOON
  </div>
 </div>
</section>

<!-- FOOTER -->
<footer>
 <div class="footercon">
  <p>Copyright @ pe-zona.ro</p>
 </div>
</footer>
</body>
</html>



   /* ARTICOLE */
.card {
  background-color: #c4c4;
  margin: 20px;
  padding: 20px;
  border: 6px solid #c5c5;
}


/* CONTAINER MENIU HEADER */
.mhcon {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  border: 1px solid red;
  order: 1;
  flex: 1;
}

/* PATREON BUTTON */
.mhconitem {
  margin: 25px 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  background-color: #f07167;
  border-radius: 4px;
  border: none;
}

.mhconitem a {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  text-decoration: none;
}


/* DISCORD BUTTON */
.mhconitem2 {
  margin: 25px 15px;
  padding: 20px;
  width: 200px;
  text-align: center;
  background-color: #6a4c93;
  border-radius: 4px;
  border: none;
}

.mhconitem2 a {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  text-decoration: none;
}

/* CONTAINER SIDEBAR */
#sidebar {
 background-color: black;
 height: 100vh;
 width: 25vh;
 display: flex;
 flex: 1;
}

/* CONTAINER CONTENT */
.content {
  display: flex;
  justify-content: flex-end;
  flex: 2;
}

/* CONTAINER FOOTER */
.footercon {
  display: flex;
  justify-content: flex-end;
}

.footercon p {
  justify-content: center;
}

Answer 1

使用 CSS-Grids，您的布局已准备就绪 :)

<块引用>

CSS-Grids 提供了很大的灵活性来创建这样的布局，而不是通过使用弹性框。

CODEPEN 链接： https://codepen.io/emmeiWhite/pen/abmEBgP

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  height: 90vh;
  width: 90vw;
  margin: 1rem auto;
  gap: 1rem;

  grid-template-areas:
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside section section section"
    "aside footer footer footer"
    "aside footer footer footer";
}

aside,
header,
footer,
section {
  border: 1px solid #ccc;
}
aside {
  grid-area: aside;
}

section {
  grid-area: section;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 2rem;

  grid-template-areas:
    " header header header"
    "content content content"
    "content content content"
    "content content content"
    "content content content"
    "content content content";
}

header {
  grid-area: header;
  border: none;
}

header .mhcon {
  display: flex;
  justify-content: flex-end;
}

header .mhcon div {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
}

header .mhcon div:last-child {
  margin-left: 1rem;
}
.content {
  display: grid;
  grid-area: content;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 1rem;
}

.card {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer {
  grid-area: footer;
}

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name"viewport" content="width=device-width", initial-scale="1.0"/>
    <title>PE-ZONA.RO | WEBTOONS</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <!-- SIDEBAR-NAVIGATIE -->
    <aside>
      <nav>
        <div id="sidebar">
          <ul>
            <li><a href="#">WEBTOONS</a></li>
            <li><a href="#">ECHIPĂ</a></li>
            <li><a href="#">ALĂTURĂ-TE</a></li>
            <li><a href="#">BLOG</a></li>
          </ul>
        </div>
      </nav>
    </aside>

    <!-- WEBTOONS -->
    <section>
      <!-- HEADER - ICONIȚE -->
      <header>
        <div class="mhcon">
          <div class="mhconitem"><a href="#">PATREON</a></div>
          <div class="mhconitem2"><a href="#">DISCORD</a></div>
        </div>
      </header>
      <div class="content">
        <div class="card">
          <h3>NUME WEBTOON1</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON2</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON3</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON1</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON2</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>

        <div class="card">
          <h3>NUME WEBTOON3</h3>
          <br />
          <p>DESCRIERE WEBTOON</p>
        </div>
      </div>
    </section>

    <!-- FOOTER -->
    <footer>
      <div class="footercon">
        <p>Copyright @ pe-zona.ro</p>
      </div>
    </footer>
  </body>
</html>

flexbox 和网格布局问题

1 个答案: