css实现图文混排

css实现图文混排

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6
 7 <style type="text/css">
 8
 9 #imgtext{
10         border:#06F dashed 1px;
11         width:180px;
12 }
13 #img{
14         float:right;
15 }
16 #text{
17         color:#F60;
18         font-family:"华文隶书";
19 }
20 </style>
21
22 </head>
23
24 <body>
25
26 <div id="imgtext">
27     <div id="img">
28         <img src="9.bmp" />
29     </div>
30     <div id="text">
31         这是一个美女,说明文字。
32         一切尽在不言中。哇
33         !这是一个美女,说明文字。
34         一切尽在不言中。哇!
35         这是一个美女,说明文字。
36         一切尽在不言中。哇!
37     </div>
38 </div>
39 </body>
40 </html>
时间: 2024-08-24 03:46:51

css实现图文混排的相关文章

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

超全css解决方案之图文混排解决方案

第一种方法:背景图片法 这种方法适用于非动态内容,图片用于装饰的情况下.主要是设置父元素的padding的宽度为背景图片的宽度加上图片和文字的间距,然后把背景图片定位到padding里面就可以了 图文混排demo1,背景图片法    //因是转载的,我又是菜鸟,下面图片乱了,正确的是图片跟文字都在一行. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pel

CSS文字环绕图片 图文混排效果

CSS实现文字环绕图片效果,也就是大家常见到的文中图效果,比如文字会自动围绕一个方块状的图片广告,这一切都是自动的,不需要另外排版,对此有需要有网页,可借鉴本代码,主要是利用CSS的clear属性实现. <html> <head> <title>CSS文字环绕图片 图文混排效果丨石家庄电缆附件</title> </head> <body> <div style="float:left;"> <di

javaWeb css图文混排

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #hunpai{ width:500px; height:400px; border:2px dashed orange; padding:5px;/* 内边界 */

DIV+CSS 图文混排的图片居中办法

不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. 1 <div>图文混排 2 <br> 3 <span style="text-align:center"><img src="http://www.baidu.com/img/baidu_jgylogo3.gif"></span> 4 </div>

关于仿网易新闻中详细页图文混排功能的实现

最近在了解关于新闻内容的图文混排的效果,网上有人开源一个仿网易新闻的代码,本文就是简单记录学习其详细页面显示的效果实现: 下载地址:https://github.com/dsxNiubility/SXNews 效果图: 其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中:文章的样式已经存在项目中,直接去调用: 1:首先了解两个相关的实体对象,一个是新闻的主体内容,另外一个就是图片的相关信息实体: 1:主

html基础 设置img的align属性,left,right 实现图文混排的效果

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ ex1: code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; chars

图文混排-------专辑详情

---恢复内容开始--- 最近,需求要求做一个专辑详情的图文混排,整个界面大概分为4部分: 1.顶部banner和音频控制区 2.中间图文混排区,文字解析CSS代码,图片做多种跳转 3.下部留言区,可进行点赞 4.底部控制区,主要有字号,点赞,留言,分享等调节 大概如下: 由于涉及到随机跳转,首先想到的是应该用UITableView或者UICollectionView进行绘制,至于解析CSS代码则是找一个第三方库进行处理,在布局的时候UIScrollView和UIButton的结合使用是无法满足

Android 图文混排 通过webview实现并实现点击图片

在一个开源项目看到是用的webview 实现的 1. 这是在asset中的一个模板html <html> <head> <title>News Detail</title> <meta name="viewport" content="width=device-width, minimum-scale=0.5, initial-scale=1.2, maximum-scale=2.0, user-scalable=1&qu