文本在框内图像旁边未对齐

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 {

}

我的问题是，因为我的标题始终在右边725px，如果我的标题大于5个字母，它就不在图片旁边，否则我将不得不再次放置它，是否有更简单的方法这个？因为手动执行令人沮丧。

谢谢。

Answer 1

尝试删除标题和文本中的浮动以及.title中的“右”属性，然后将“ float：left”添加到图片中。

Answer 2

您可以使用flexbox解决这个问题：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

在您的父母about上使用follow属性，将它们彼此放置：

.about {
    display: flex;
}

一些重构：在这种情况下，您实际上并没有在图像周围添加div。而且我建议您在class的情况下使用id。查看代码段：

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