Question

我正在尝试创建一个div，该div的左侧为图像，标题为，右侧为文本，这是它的外观： https://imgur.com/6LaetfN

我设法使用flexbox来对齐图像和段落，但是当我在段落的左侧添加h3标签时，您会看到我提供的小提琴在该段落的顶部，如何从图片中换行？

我尝试使用浮点数而不是flex，但这没用

这是我的html：

  <div class="sda">
                     <div class="topic-cont">
                     <img src="/assets/images/test-img.jpg" alt="test-image" class="topic-img">

                     <p class="topic-p">
                        <h3>My website name</h3>
                       asdasdaas
                       asdasdaas
                       asdasdaas
                       asdasdaas
                     </p>
                     </div>

                     <div class="topic-cont">
                         <img src="/assets/images/test-img.jpg" alt="test-image" class="topic-img">            
                         <p class="topic-p">
                           asdasdaas
                           asdasdaas
                           asdasdaas
                           asdasdaas
                         </p>
                       </div>

                       <div class="topic-cont">
                           <img src="/assets/images/test-img.jpg" alt="test-image" class="topic-img">
                           <p class="topic-p">
                             asdasdaasd
                             asdasdaasd
                             asdasdaasd
                             asdasdaasd
                           </p>
                         </div>

                 </div>

和我的CSS：

.topic-img {
  height: 130px;
  width: 150px;
}

.topic-cont {
  margin-left: 20px;
  width: 200px;
  display: flex;
}

.topic-p {
  margin-top: 30px;
}

.sda {
  width: 200px;
}

h6 {
  text-align: center;
}

Answer 1

我已解决您的问题并添加了解决方案。所有更改均在代码中带有注释。您必须在代码中更改这些属性。谢谢。

.topic-img {
  height: 130px;
  width: 150px;
}

.topic-cont {
  margin-left: 20px;
  width: 400px;  /*changed*/
  display: flex;
}

.topic-p {
  margin-top: 5px;  /*changed*/
}

.sda {
  width: 200px;
}

h3 {
  margin: 0; /*Newly Added*/
  text-align: left; /*changed*/
}

.topic-detail { /*Newly Added*/
  margin-left: 10px;
}

<div class="sda">
  <div class="topic-cont">
    <img src="https://i.imgur.com/mdqBxVE.jpg" title="source: imgur.com" alt="test-image" class="topic-img">

    <div class="topic-detail"> <!-- a new div is added wrapping the h3 and p element -->
      <h3>My Website Name</h3> <!-- h3 is set outside the p element -->
      <p class="topic-p">

         asdasdaas
         asdasdaas
         asdasdaas
         asdasdaas
      </p>
    </div>
    
  </div>
</div>

如何将图像彼此左下方对齐，标题和p对齐

1 个答案: