html+css 左边是图片,右边是文字

高尔夫球运动是一项健康、绿色、快乐、回归自然的体育运动。山东拥有近30家国际标准高尔夫球场,提供完善的服务设施,适合比赛、会议、旅游休闲等。在这里,您可以体验到高尔夫球带来的尊贵服务。
<div class="golf">
	<div class="photo"><img src="images/ql36.jpg"></div>
	<div class="intro">
	    <h3>高尔夫</h3>
	    <p>高尔夫球运动是一项健康、绿色、快乐、回归自然的体育运动,打高尔夫球能让人体验挑战与激情,实现人与自然的和谐。人与人礼貌谦让的良好运动精神,是高尔夫球运动的精髓所在。山东的高尔夫球场近30家,全部是按国际标准建造的,场内服务功能及设施完备,是比赛、会议、旅游休闲、商务于一体的度假场所,来山东打高尔夫球定会让您亲身体验到高尔夫应享的尊贵服务。
                        </p>
	</div>
</div>
.photo{
    float:left;
    width:20%;
}
.intro{
    float:right;
    width:80%;
}



# 题目重述 问题是如何在网页中实现“左边图片右边文字”的布局。 # 详解 要实现“左边图片右边文字”的常见图文布局,推荐使用 **CSS 的 Flexbox 布局**,它简单、高效且响应式友好。 --- ### ✅ 推荐实现方式:`display: flex` ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>文布局</title> <style> .container { display: flex; align-items: center; /* 垂直居中对齐 */ gap: 20px; /* 图文间距 */ max-width: 800px; margin: 0 auto; padding: 20px; font-family: "Microsoft YaHei", sans-serif; } .image { flex: 0 0 200px; /* 固定图片宽度,不伸缩 */ } .image img { width: 100%; height: auto; border-radius: 8px; } .text { flex: 1; /* 文字区域占剩余空间 */ line-height: 1.6; color: #333; } </style> </head> <body> <div class="container"> <!-- 图片 --> <div class="image"> <img src="https://via.placeholder.com/200x150" alt="示例图片"> </div> <!-- 文字 --> <div class="text"> <h3>这里是标题</h3> <p>这是图片侧的文字说明。可以用来描述产品、服务或任何你想表达的内容。</p> </div> </div> </body> </html> ``` --- ### 效果说明: - 使用 `display: flex` 让子元素水平排列; - `align-items: center` 实现垂直居中; - `gap: 20px` 设置图片文字之间的间距; - `flex: 0 0 200px` 固定图片宽度为 200px,避免拉伸; - `flex: 1` 让文字区域自动填充剩余空间; - 图片使用 `width: 100%` 自适应容器,保持响应式。 --- ### 其他可选方法(了解即可): | 方法 | 特点 | |------|------| | `float: left` | 传统方式,需清除浮动,已过时 | | `inline-block` | 需处理空白字符间隙,不够灵活 | | `grid` | 更适合复杂布局,单行可用但略显复杂 | > ✅ 现代开发强烈推荐使用 **Flexbox** 实现此类布局。 --- ### 响应式优化建议: 在小屏幕下可改为“上图下文”布局: ```css @media (max-width: 600px) { .container { flex-direction: column; text-align: center; } } ``` 这样在手机端先显示图片,再显示文字,用户体验更佳。 # 知识点 - **Flexbox布局机制**:通过`display:flex`实现元素水平排列与空间分配。 - **flex属性应用**:`flex: 0 0 auto`控制固定尺寸,`flex: 1`实现自适应填充。 - **响应式设计思维**:利用媒体查询适配不同设备,提升可访问性。
评论 18
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值