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

Question

I am trying to add a list of different posts on my website.我正在尝试在我的网站上添加不同帖子的列表。 So I have created different divs and added an image and some text to it.所以我创建了不同的 div 并向其中添加了图像和一些文本。 But here is the Problem:但问题是：

I want the Heading to be on top, then the text under it and at the bottom should be the redirection.我希望标题位于顶部，然后它下面和底部的文本应该是重定向。

Here is my index.php:这是我的 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>

And my style.css:还有我的风格。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;
}

I have tried to change display: flex to other types of display, but none of them works as I want it to work.我曾尝试将display: flex更改为其他类型的显示器，但它们都无法正常工作。

I hope you can help me, If there is any information missing.我希望你能帮助我，如果有任何信息丢失。 please tell me.请告诉我。

Daniel.丹尼尔。

Answer 1

was such a result needed?需要这样的结果吗？ I created a blog-post-content class wrapping the post content with it.我创建了一个blog-post-content class 用它包装帖子内容。

 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-29 19:00:18

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-29 19:00:18

解决方案1
1 已采纳 2020-07-29 19:00:18