时间戳

首页 > 解决方案 > 为什么我的 CSS flexbox 不会影响我的 div，即使它适用于其他部分

html - 为什么我的 CSS flexbox 不会影响我的 div，即使它适用于其他部分

问题描述

我正在尝试使用 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>

标签： htmlcss

解决方案

只需设置display:flex为 .hero 类和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>

推荐阅读