css制作图文混排原理
CSS 图文混排原理
图文混排主要通过 CSS 的 float、flexbox、grid 或 position 属性实现，核心是控制文本与图片的布局关系。
使用 float 属性
通过 float 让图片脱离文档流，使文本环绕图片排列。图片可以设置为左浮动或右浮动。
img {
float: left; /* 或 right */
margin: 0 15px 15px 0; /* 控制图片与文本间距 */
}使用 flexbox 布局
Flexbox 可以更灵活地控制图文对齐方式。将容器设为 display: flex，通过 align-items 调整垂直对齐。
.container {
display: flex;
align-items: center; /* 垂直居中 */
gap: 20px; /* 图文间距 */
}使用 grid 布局
Grid 适合复杂混排场景，通过定义网格区域分配图文位置。
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 图片与文本宽度比例 */
gap: 15px;
}使用 position 定位
绝对定位可精确控制图片位置，但需手动调整文本间距避免重叠。
img {
position: absolute;
top: 10px;
left: 10px;
}
.text {
margin-left: 120px; /* 为图片留出空间 */
}处理响应式布局
通过媒体查询调整不同屏幕下的图文排列方式。
@media (max-width: 768px) {
img {
float: none;
display: block;
margin: 0 auto 15px;
}
}注意事项
- 浮动布局需清除浮动（
clearfix）防止父容器高度塌陷。 - Flexbox/Grid 对旧浏览器兼容性较差，需添加前缀。
- 始终为图片设置
max-width: 100%避免溢出容器。
