html - 将图像定位在屏幕左侧

Question

我想并排放置我的文本和图像。现在，文本位于图像的左侧。要将文本向右移动，我可以更改

<aside>

我如何将图像移动到左侧？

<aside style="background-image: url(img/s-esh_spectrogram.jpg);"> </aside>

标签： html

Answer 1

在您的部分周围设置一个包装器并display: flex在其上设置 CSS 属性。
进一步阅读：https ://www.w3schools.com/css/css3_flexbox.asp

.wrapper {
  display: flex;
}

section.text-section {
  height:     300px;
  width:      60%;
  background: #82fcf5;
}

aside.image-section {
  height:     300px;
  width:      40%;
  background: #c8fc55;
}

<div class="wrapper">

  <aside class="image-section" style="background-image: url(img/s-esh_spectrogram.jpg);">
    <p>Image here...</p>
  </aside>

  <section class="text-section">
    <p>Text here...</p>
  </section>

</div>