Question

我是初学者，所以在学习如何将东西放在我想要的地方时遇到了一些麻烦。

我想移动标题下的段落，使其顶部与图像和标题对齐。

我还想向下滚动才能看到下一部分（水电的东西）而不是第一部分的旁边（风的东西）

我希望这是有道理的，TIA。

.re-format {
  display: inline-flex;
}

.re-format img {
  padding: 50px 0 0 50px;
  width: 200px;
  height: 300px;
}

.re-format h3 {
  color: #474747;
  text-shadow: none;
  padding: 40px;
}

.re-format p {
  font-family: candara;
  color: #474747;
  font-size: 20px;
}

<div class="re-format">
  <img src="images/wturbine.jpeg">
  <h3>Wind Energy</h3>
  <p>para about wind <br>para about company<br> para about some other stuff</p>

  <img src="images/dam2.jpg">
  <h3>Hydro Energy</h3>
  <p>para about hydro <br>para about company<br> para about some other stuff</p>
</div>

Answer 1

这是想要的效果吗？

说明：

首先，要使内容垂直而不是水平滚动，请将 flex-direction 设置为 column。
其次，我稍微改变了每个“标题+内容”元素的布局。现在这两个元素中的每一个都有自己的封闭 div (.subsection)。
小节中的图像和文本使用水平 flexbox 排列（也有其他方法）。

.re-format {
  display: inline-flex;
  flex-direction: column;
}

.re-format img {
  padding-right: 50px;
  width: 200px;
  height: 300px;
}

.re-format h3 {
  color: #474747;
  text-shadow: none;
  padding: 40px;
}

.re-format p {
  font-family: candara;
  color: #474747;
  font-size: 20px;
}

.subsection-content {
  display: flex;
  flex-direction: row;
}

<div class="re-format">
  
  <div class="subsection">
    <h3>Wind Energy</h3>
    <div class="subsection-content">
      <img src="images/wturbine.jpeg">
      <p>para about wind <br>para about company<br> para about some other stuff</p>
    </div>
  </div>
  
  
  
  <div class="subsection">
    <h3>Hydro Energy</h3>
    <div class="subsection-content">
      <img src="images/dam2.jpg">
      <p>para about hydro <br>para about company<br> para about some other stuff</p>
    </div>
  </div>
</div>

Answer 2

好的，您想要的结果图像清除了一切。

试试这个。希望你能按照评论来了解真正发生了什么。

/* display subsection as a flex box; default direction is row */
.subsection {
    display: flex;
}
.subsection-content {
    text-align: left;
    /* add a small padding to the left */
    padding-left: 10px;
}

.re-format {
  display: inline-flex;
  flex-direction: column
}

.re-format img {
  padding: 50px 0 0 50px;
  width: 200px;
  height: 300px;
}

.re-format h3 {
  color: #474747;
  text-shadow: none;
  padding: 40px;
  padding-left: 0px;
  text-align: left;
}

.re-format p {
  font-family: candara;
  color: #474747;
  font-size: 20px;
}

<div class="re-format">
  <div class="subsection">
    <!-- bring the image out of the subsection content so it can displayed independent of the right column -->
    <img src="images/wturbine.jpeg">
    <div class="subsection-content">
      <h3>Wind Energy</h3>
      <p>para about wind <br>para about company<br> para about some other stuff</p>
    </div>
  </div>  
  <div class="subsection">
    <!-- bring the image out of the subsection content so it can displayed independent of the right column -->
    <img src="images/dam2.jpg">
    <div class="subsection-content">
      <h3>Hydro Energy</h3>
      <p>para about hydro <br>para about company<br> para about some other stuff</p>
    </div>
  </div>
</div>

对齐标题、段落和图像

2 个答案: