时间戳

首页 > 解决方案 > flexbox 和网格布局问题

html - flexbox 和网格布局问题

问题描述

我已经开始学习 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;
}

标签： htmlcssflexboxcss-grid

解决方案

Using CSS-Grids, Your layout is ready :)

CSS-Grids offer lots of flexibility to create such layouts rather than by using flex-boxes.

CODEPEN LINK: 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>

推荐阅读