1. 使用 float 属性
float 是 CSS 中用于实现元素浮动的常用属性。通过设置元素的 float 属性为 left 或 right，可以使元素向左或向右浮动，从而实现图文并排的效果。
示例代码：
img {
float: left;
margin-right: 20px;
}在这个示例中，我们将图片的 float 属性设置为 left，使其向左浮动。同时，为了保持图片与文字之间的间距，我们设置了 margin-right 属性。
2. 使用 display 属性
display 属性用于控制元素的显示类型。通过将元素的 display 属性设置为 inline-block，可以使元素以行内块级元素的形式显示，从而实现图文并排的效果。
示例代码：
img, p {
display: inline-block;
}在这个示例中，我们将图片和段落的 display 属性都设置为 inline-block，使它们以行内块级元素的形式显示。这样，图片和文字就可以并排显示了。
3. 使用 flexbox 布局
flexbox 是 CSS3 新增的一种布局方式，它可以轻松地实现图文并排效果。通过将容器的 display 属性设置为 flex，然后设置子元素的 align-items 属性为 stretch，可以使子元素垂直方向上平分容器的高度。
示例代码：
.container {
display: flex;
}
.container img, .container p {
align-self: stretch;
}在这个示例中，我们将容器的 display 属性设置为 flex，然后设置子元素的 align-self 属性为 stretch，使它们在垂直方向上平分容器的高度。这样，图片和文字就可以并排显示了。
4. 使用 grid 布局
grid 布局是 CSS3 新增的一种布局方式，它也可以轻松地实现图文并排效果。通过将容器的 display 属性设置为 grid，然后设置子元素的 align-self 属性为 stretch，可以使子元素垂直方向上平分容器的高度。
示例代码：
.container {
display: grid;
}
.container > * {
align-self: stretch;
}在这个示例中，我们将容器的 display 属性设置为 grid，然后设置子元素的 align-self 属性为 stretch，使它们在垂直方向上平分容器的高度。这样，图片和文字就可以并排显示了。
5. 使用 position 属性和负外边距
position 属性用于控制元素的定位方式。通过将图片的 position 属性设置为 relative，然后设置其 top、bottom、left、right 属性为 auto，可以使图片相对于其原始位置进行移动。同时，通过设置图片的负外边距，可以实现图文并排的效果。
示例代码：
img {
position: relative;
}
img::after {
content: "";
display: block;
}在这个示例中，我们将图片的 position 属性设置为 relative，然后设置其 top、bottom、left、right 属性为 auto，使其相对于其原始位置进行移动。同时，我们创建了一个伪元素（：:after），并将其 display 属性设置为 block，以便我们可以设置它的外边距。接下来，我们可以通过设置伪元素的 top、bottom、left、right 属性为负值，实现图文并排的效果。例如：
img::after {
content: "";
display: block;
position: absolute;
top: -20px; /* 根据需要调整 */
bottom: -20px; /* 根据需要调整 */
left: -20px; /* 根据需要调整 */
right: -20px; /* 根据需要调整 */
}相关问题与解答：
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/126400.html
微信扫一扫 