0

我想创建一个 CSS-Card

左侧应该是图像,而在骑行侧应该是标题和段落。

此外,在右侧的下半部分应该有头像、帖子的名称和日期。


所以我的问题是

如何防止container-article中的内容与container-card重叠?

我目前使用 CSS 卡的状态

----------

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <meta name="author" content="Ufuk Can Varol" />
    <meta name="description" content="Article Card v3" />
    <!-- CSS -->
    <link rel="stylesheet" href="css/index.css" />
    <!-- Font-Family [Manrope]-->
    <link
      href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <!-- Favicon -->
    <link
      rel="shortcut icon"
      type="image/png"
      href="assets/images/favicon-32x32.png"
    />

    <title>Article</title>
  </head>

  <body>
    <div id="container">
      <div class="container-card">
        <div class="container-image"></div>
        <div class="container-article">
          <div class="article-header">
            <h2>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Voluptatum, officia.
            </h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum,
              vel suscipit impedit accusantium nihil minima asperiores,
              exercitationem sapiente ad expedita fugiat. Veritatis sit
              voluptatem qui est unde, aspernatur nemo impedit!
            </p>
          </div>
          <div class="article-footer">
            <div class="article-footer-author">
              <div class="author-image"></div>
              <p>
                Savannah Garrett <br />
                28 Jun 2020
              </p>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;

  font-family: 'Manrope', sans-serif;
  background-color: aliceblue;
}

#container {
  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 0;

  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-items: center;

  background-color: antiquewhite;
}

.container-card {
  width: 800px;
  height: 300px;

  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 2fr 3fr;
  background-color: aqua;
}

.container-image {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background-color: azure;
}

.container-article {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 40px;

  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  background-color: aquamarine;
}

.article-header {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: bisque;
}

.article-footer {
  width: 100%;
  height: 100%;
  background-color: blueviolet;
}
4

1 回答 1

0

height: 300px从中删除.container-card。如果您设置一个固定的高度,它不会扩展以适应其子元素。

于 2020-07-15T19:09:10.297 回答