为什么文字没有移动到图像的右上角？

问题描述 投票：0回答：1

我的理解是

img
和
span
都是内联元素，应该彼此相邻移动。

但是，我在下面的示例中没有看到这种情况发生。

我的 HTML 正文如下所示：

<body>
  <div class="container">
    <img src="https://www.w3schools.com/w3images/mac.jpg" alt="Mountain landscape">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci aliquid, non cumque, eveniet atque et
      suscipit quisquam libero saepe fugiat vero qui nulla labore tempore nostrum? Quisquam quibusdam illo
      tempora!</span>
  </div>
</body>

我的 CSS 如下所示：

p {
    font-size: 20px;
}
img {
    width: 300px;
}

enter image description here

php html css forms css-selectors
1个回答
0
投票

使用 Flexbox 使子元素（img 和 span）并排。

.container {
      display: flex;
    }

    img {
      width: 300px;
    }

    span {
      margin-left: 16px;
      font-size: 20px;
    }
<div class="container">
      <img src="https://www.w3schools.com/w3images/mac.jpg" alt="Mountain landscape">
      <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci aliquid, non cumque, eveniet atque et
        suscipit quisquam libero saepe fugiat vero qui nulla labore tempore nostrum? Quisquam quibusdam illo
        tempora!</span>
    </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.