html - 框内图像旁边的文本未对齐

Question

这是我的盒子的 html，其中包含标题文本和图像。

<div id="about">
<div id="title">  <h3><b>About</b></h3></div>
<div id="text"><p>Text</p></div>
<div id="img"><img src="img/3.jpg" height="300" width= "400" alt="?">          
</div>

这是CSS

#about {
  color: white;
  padding: 10px;
  position: relative;
  width: 90%;
  height: 325px;
  background: lightgrey;
  top: 30px;
  margin: 0 auto;
  overflow: auto;
  color: white;
  background: #262626;
  box-sizing: border-box;
}

#text {
  width: 720px;
  position: relative;
  top: 30px;
  float: right;
}

#title {
  float: right;
  position: relative;
  right: 725px;
  top: 0px;
}

#img {

}

我的问题是，因为我的标题总是向右 725 像素，如果我的标题大于 5 个字母，它就不会紧挨着图片，否则我将不得不重新定位它，有没有更简单的方法这？因为手动操作很令人沮丧。

谢谢。

Answer 1

使用 flexbox 可以更容易地解决这个问题:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

将标题和文本放在自己的包装器 .text-wrapper 中，并将 img 放在包装器之前。

在你的 parent about 上使用 follow 属性，将它们相互放置:

.about {
    display: flex;
}

一些重构:对于这种情况，您实际上并没有在图像周围设置 div。如果是 id，我建议您使用 class。查看代码段:

.about {
  display: flex;
}

.text-wrapper {
  padding-left: 20px;
}

<div class="about">
  <img src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" height="300" width="400" alt="?">
  <div class="text-wrapper">
    <div class="title">
      <h3><b>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risu</b></h3>
    </div>
    <div class="text">
      <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula
        elementum sed sit amet dui. 
        suscipit tortor eget felis p
        Sed porttitor lectus nibh.</p>
    </div>
  </div>
</div>