时间戳

首页 > 解决方案 > 如何在 flex 元素之后创建新行？

html - 如何在 flex 元素之后创建新行？

问题描述

我正在尝试在我的网站上添加不同帖子的列表。所以我创建了不同的 div 并向其中添加了图像和一些文本。但这是问题所在：

h1，段落和 <a> 不在彼此之下

我希望标题位于顶部，然后它下方和底部的文本应该是重定向。

这是我的 index.php：

<body>
    <header>
      
<!-- The header is not important (would be too much code) -->

    </header>

    <div class="blog-post">
        <div class="blog-post_img">
          <img id="newyork" src="../../../../img/newyork.jpg" alt="New York wurde nicht gefunden!">
        </div>
        <div class="blog-post_info">

        </div>
        <h1 class="blog-post_title">New York</h1>
        <p class="blog-post_text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <a href="new-york/" class="blog-post_cta">Mehr..</a>
    </div>
  </body>

还有我的 style.css：

html{font-family: 'Roboto', sans-serif;;}

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background-color: #f5f5f5;
}

.blog-post{
  width: 100%;
  max-width: 58rem;
  padding: 5rem;
  max-height: 18rem;
  background: white;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
}

.blog-post_img{
  min-width: 35rem;
  max-width: 35rem;
  transform: translateX(-8rem);
  position: relative;
}

.blog-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .8rem;
  display: block;
}

.blog-post_img::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: .5rem .5rem 3rem 1px rgba(0, 0, 0, .05);
  border-radius: .8rem;
}

我曾尝试更改display: flex为其他类型的显示，但它们都不能按我希望的那样工作。

我希望你能帮帮我！如果缺少任何信息，请告诉我。

丹尼尔。

标签： htmlcsspostblogs

解决方案

需要这样的结果吗？我创建了一个blog-post-content用它包装帖子内容的类。

html{font-family: 'Roboto', sans-serif;}

body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  background-color: #f5f5f5;
}

.blog-post{
  width: 100%;
  max-width: 58rem;
  padding: 5rem;
  max-height: 18rem;
  background: white;
  box-shadow: 0 1.4rem 8rem rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
}

.blog-post_img{
  min-width: 35rem;
  max-width: 35rem;
  transform: translateX(-8rem);
  position: relative;
}

.blog-post_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .8rem;
  display: block;
}

.blog-post_img::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: .5rem .5rem 3rem 1px rgba(0, 0, 0, .05);
  border-radius: .8rem;
}

.blog-post-content {
  display: flex;
  flex-direction: column;
}
<body>
    <header>
      
<!-- The header is not important (would be too much code) -->

    </header>

    <div class="blog-post">
        <div class="blog-post_img">
          <img id="newyork" src="../../../../img/newyork.jpg" alt="New York wurde nicht gefunden!">
        </div>
        <div class="blog-post_info">

        </div>
        <div class="blog-post-content">
        <h1 class="blog-post_title">New York</h1>
        <p class="blog-post_text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <a href="new-york/" class="blog-post_cta">Mehr..</a>
        </div>
    </div>
  </body>

推荐阅读