Question

浮动不起作用。更改边距不起作用。互联网上根本没有将两个HTML元素彼此相邻放置。

<body>
    <section id="slideshow">
        <div id="slide">
            <h3>Hello World</h3>
            <img id="slide-image" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="">
        </div>
    </section>
</body>

我只希望此标题与图片位于同一行。

Answer 1

您可以将显示flex添加到.slide或将inline-block添加到h3和img

.slide {
  display: flex;
  align-items: center;
}

img {
  width: 200px;
  height: 200px;
}

.slide2 > * {
  display: inline-block;
}

<div class="slide">
  <h3>Hello World</h3>
  <img id="slide-image" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="">
</div>
 
<div class="slide2">
    <h3>Hello World</h3>
    <img id="slide-image" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="">
</div>

如何使用CSS将两个元素彼此相邻放置

1 个答案: