html - 在内联的 div 中显示项目不起作用

Question

我在创建页面时遇到问题。我创建了一个网站，但无法弄清楚。我粘贴了我的 html 代码和 css 代码。

我想要的是顶部的标题，然后我将创建几张带有信息的照片，例如左侧的照片，右侧的段落，然后反转并保留，但我无法弄清楚我的第一块信息。在css中，我得到了关于我的信息内容的信息，然后我得到了带有标题的信息，以及带有照片和段落的div，我无法在显示内联块中制作。怎么了？在我的容器和行上，我在下面粘贴了信息。请帮助我。我还添加了我当前状态的图像。

   .container {
  margin: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
 <section class="why-we-help">
    <div class="container">
        <div class="row">
            <div class="home">
                <div class="info">
                    <h1>Dlaczego chcemy pomóc?</h1>
                </div>
                <div class="content">
                    <img class="img" src="images/2.jpg" alt="najwazniejsza jest miłość">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt,
                        enim
                        temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis
                        adipisci
                        porro debitis, quam ad obcaecati.</p>
                </div>
            </div>
        </div>
    </div>
</section>

.home {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #000000;
}

.info {
  margin: 35px auto;
}

.info h1 {
  color: #ffffff;
  font-size: 2em;
  font-weight: 600;
}

.content {
  display: flex;
 display: inline;
}

.content img {
  flex: 0 0 50%;
  width: 50%;
}

.content p {
  flex: 0 0 50%;
  width: 50%;
}

标签： htmlcss

Answer 1

尝试使用 display:flexand flex-direction: rowandflex-direction: row-reverse