时间戳

首页 > 解决方案 > 对齐标题、段落和图像

html - 对齐标题、段落和图像

问题描述

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

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

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

我希望这是有道理的，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>

标签： htmlcss

解决方案

这是想要的效果吗？

解释：

  • 首先，要使内容垂直滚动而不是水平滚动，设置flex-direction为column.

  • 其次，我稍微改变了每个“标题+内容”元素的布局。现在这两个元素中的每一个都有自己的封闭 div ( .subsection)。

  • 小节内的图像和文本使用水平弹性框排列（也有其他方法）。

.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>

推荐阅读