html5怎么左文右图

在HTML5中，你可以使用`<div>`元素结合CSS来创建一个左文右图的布局。通常，可以使用Flexbox或者Grid布局来轻松实现。这里是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; /* 使用 Flexbox 布局 */ justify-content: space-between; /* 文本在左边，图片在右边，并留出空间 */ } .content { width: 70%; /* 文本区域宽度，可根据需要调整 */ } .image-container { width: 30%; /* 图片区域宽度，同样可调整 */ } </style> </head> <body> <div class="container"> <div class="content">  左侧文字描述... </div> <img class="image-container" src="your-image-url.jpg" alt="图片描述">  </div> </body> </html> ``` 在这个例子中，`.container`设置了Flexbox布局，并通过`justify-content: space-between`让左右两个部分并排显示，同时保持一定的间距。`.content`和`.image-container`分别设置了各自的内容区域宽度。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通