Question

我正在尝试使用flexbox将文本div和图片div彼此对齐，即使我之前做过同样的事情并且效果很好，但这一次由于某种原因不起作用。

这是我的HTML和CSS代码：

.hero-introduction {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 40rem;
}

.hero-images {
  flex: 1 1 40rem;
}

<section class="hero">
  <div class="hero-introduction">
    <h2>Elena Joy <br> Photography</h2>
    <p>paragraphe here</p>
    <a href="#gallery">Gallery</a>
  </div>
  <div class="hero-images">
    <img class="hero-elena" src="images/elena-joy.png" alt="picture of elena joy">
  </div>

</section>

Answer 1

只需将display:flex设置为.hero class和flex-direction:row

.hero{
    display: flex;
    flex-direction: row;
   }
.hero-introduction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 40rem;
}
.hero-images {
    flex: 1 1 40rem;
}

<section class="hero">
            <div class="hero-introduction">
                <h2>Elena Joy <br> Photography</h2>
            <p>paragraphe here</p>
            <a href="#gallery">Gallery</a>
            </div>
            <div class="hero-images">
                <img class="hero-elena"  
                src="images/elena-joy.png" 
                alt="picture of elena joy">
            </div>

        </section>

为什么我的css flexbox即使在其他部分也起作用却不影响我的div

1 个答案: