css - 对为什么这些图片和文字不对齐感到困惑

Question

我有一个包含 2 个不同 div 的 div。这 3 个中的每一个都有一张宽度为 (60%) 的图片和其中的一些文本 (40%)，但它们根本没有对齐。文字在正确的位置，图片在正确的组织中，但它们离页面太远了。我是 CSS 的新手，我不知道如何解决这个问题

这是它的样子的图片

HTML:

<div class="section 1">
  <p id="section1text">
    <b>ME</b><br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
  </p>
  <img src="section1.jpg" id="section1pic">
</div>

<div class="section 2">
  <p id="section2text">
    <b>WORK</b><br> 
  </p>
  <img src="section2.jpg" id="section2pic">

</div>

<div class="section 3">
  <p id="section3text">
  </p>
  <img src="section3.jpg" id="section3pic">

</div>

CSS:

.aboutSection{
  width: 100%;
  height:100%;
}

.section{
  text-align: center;
  display: inline-block;
  width: 90%;
  height: 20%;
  margin-left: 5%;
}

#section1text{
  float: left;
  display: inline-block;
  height: 100%;
  width:40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  padding: 10px;

}
#section2text{
  float: right;
  height: 100%;
  width:40%;
  float: right;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  display: inline-block;
  padding: 10px;
}
#section3text{
  float: left;
  height: 100%;
  width:40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  display: inline-block;
  padding: 10px;
}

#section1pic{
  float: right;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}
#section2pic{
  float: left;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}
#section3pic{
  float: right;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}

我知道 CSS 很糟糕，但我只是想让它正常工作。

Answer 1

你需要从消除开始:

padding: 10px;

或者至少将其更改为:

padding: 10px 0;

这应该从 #section1text、#section2text 和 #section3text 中删除。填充导致您的文本部分宽度超过 40%，这不会为图像留下 60% 的宽度。