CSS解决文字环绕图片问题

2016-02-19 23:21 91 1 收藏

今天天气好晴朗处处好风光，好天气好开始，图老师又来和大家分享啦。下面给大家推荐CSS解决文字环绕图片问题，希望大家看完后也有个好心情，快快行动吧！

【 tulaoshi.com - Web开发】

CSS解决文字环绕图片问题_网页教学网webjx.com网络整理

上图是美工为一站点制作的图文并茂的新闻标题列表，采用表格进行布局，右上和下部分分布在两个单元格中，程序实现起来可不太容易：要么分两次查询，一次取4条，一次取5条；要么一次取出9条，再分在两个单元格中显示。能不能通过设置图片的属性，让文字和图片像Word中一样可以四周环绕对齐？这样程序就不用理会图片，只负责一次读取显示就可以了。经测试将图片的float属性设置为left可解决我们的问题，效果如下图：

CSS解决文字环绕图片问题_网页教学网webjx.com网络整理

dnawodiv align="left"img src="pic/20070404/014.jpg" width="91" height="84" style="float:left;" /
新闻标题列表br
新闻标题列表br
新闻标题列表br
新闻标题列表br
新闻标题列表新闻标题列表br
新闻标题列表新闻标题列表br
新闻标题列表新闻标题列表br
新闻标题列表新闻标题列表br
新闻标题列表新闻标题列表
/div

来源:http://www.tulaoshi.com/n/20160219/1629727.html

上一篇：动态加载外部css或js文件
下一篇：从A页面连接到B页面后并直接把B页面的隐藏层显示

看过《CSS解决文字环绕图片问题》的人还看了以下文章更多>>

Word如何设置SmartArt图形文字环绕

标签： word

Word如何设置SmartArt图形文字环绕第1步：打开Word2010文档窗口，选中SmartArt图形。第2步：在SmartArt工具/格式功能区中，单击排列分组中的自动换行按钮，在打开的文字环绕列表中，用户可以选择嵌入型、四周型环绕、紧密型环绕、穿越型环绕、上下型环绕、衬于文字上方和衬于文字下方多种文字环绕方式，如图1所示。 ...

CSS代码解决网页挂马问题

标签： Web开发

两行CSS来解决，共5种方案一、 iframe{n1ifm:expression(this.src='about:blank',this.outerHTML='');}/*这行代码是解决挂IFRAME木马的哦*/ script{nojs1:expression((this.src.toLowerCase().indexOf('http')==0)？document.write('木马被成功隔离!'):'');} 原理：将script标记的src拿出来转为小写，再看是不是以http开头的外域JS脚本文...

CSS Hacks和问题解决

标签： Web开发

目录介绍针对浏览器的选择器让IE6支持PNG透明移除超链接的虚线给行内元素定义宽度让固定宽度的页面居中图片替换技术最小宽度隐藏水平滚动条一. 介绍这篇文章包括了8个非常有用的解决办法, 在进行css设计遇到问题时你就会用到它们. 二. 针对浏览器的选择器这些选择器在你需要针对某款浏览器进行css设计时将非常有用. ...

单行图片文字垂直居中问题——实战

标签： Web开发

使用表格的方法来表现设计效果 style type="text/css" !-- body{ font-size:12px; font-family:"宋体"; } table{ border:1px solid #E6EFF8; margin-bottom:2px; } td{ height:23px; line-height:23px; paddin...

CSS教程:关于文字溢出问题的研究

标签： Web开发

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题；于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题，我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7，所以没有测试)，今天看到这个新帖子发现在ie下多了两个猪，至于解决的方法有很多种，发出来大家讨论...

查看更多精彩>>