css和html中怎么把视频和图片并排

在HTML和CSS中，将视频和图片并排放置可以通过多种方式实现，这里有几个常用的技巧：

**1. 使用`<div>`和`display: inline-block`或`float`：**

<div class="media-container">
  <img src="image.jpg" alt="图片" style="width: 50%; float: left;">
  <video controls src="video.mp4" poster="thumbnail.jpg" style="width: 50%; float: right;"></video>
</div>

CSS:

.media-container {
  overflow: hidden; /* 防止内容溢出 */
}

img, video {
  margin-bottom: 10px; /* 添加间距 */
}

**2. 使用Flexbox布局:**

<div class="media-container flex-container">
  <img src="image.jpg" alt="图片">
  <video controls src="video.mp4" poster="thumbnail.jpg"></video>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: space-between;
}

img, video {
  flex: 1; /* 自适应宽度 */
  margin: 0; /* 消除默认的浏览器样式 */
}

**3. 使用Grid布局:**

<div class="media-grid">
  <figure>
    <img src="image.jpg" alt="图片">
  </figure>
  <figure>
    <video controls src="video.mp4" poster="thumbnail.jpg"></video>
  </figure>
</div>

CSS:

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 两列网格 */
  gap: 10px;
}

figure {
  position: relative; /* 如果视频需要覆盖图片背景，需加此样式 */
}

以上方法都能保证图片和视频在页面上并排显示，你可以根据实际需求选择合适的方式。需要注意的是，现代浏览器普遍支持Flexbox和Grid布局，尽量优先考虑它们以提高网站的响应性和可维护性。