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

第一种方法：背景图片法

这种方法适用于非动态内容，图片用于装饰的情况下。主要是设置父元素的padding的宽度为背景图片的宽度加上图片和文字的间距，然后把背景图片定位到padding里面就可以了

图文混排demo1，背景图片法    //因是转载的，我又是菜鸟，下面图片乱了，正确的是图片跟文字都在一行。

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

html code

<div id="demo1">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

css code

#demo1{
    background:url(‘images/img150-118.jpg‘) no-repeat;
    padding-left:160px;
    width:210px;
}

第二种方法：浮动法

这种方法比较灵活，应该是float的经典应用了。思路是对左右元素都设置浮动和宽度。但是一定要注意清除子元素的浮动及ie6的双倍margin，不然会出现错误效果或影响其他元素的布局

图文混排demo2，浮动法

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

html code

<div id="demo2" class="clearfix">
    <img src="images/img200-150.jpg" alt="浮动法demo">
    <div class="flo-right">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <ul>
           <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
           <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
        </ul>
        <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
        <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
    </div>
</div>

css code

#demo2 img,
#demo2 .flo-right{
    float:left;
    display:inline;
}
#demo2 .flo-right{
    margin-left:10px;
    width:400px;
}

第三种方法：overflow法

这种方法的html代码和浮动法一样，在这里只是id变了下方便测试demo。其思路是左边元素浮动，而对右边元素设置overflow为hidden，一样完美兼容（注意在ie6下左边元素浮动，右边元素没有浮动会有3px的间距）

图文混排demo3，overflow法

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

css code

#demo3 img{
    float:left;
    display:inline;
    margin-right:10px;
}
#demo3 .flo-right{
    overflow:hidden;
    width:400px;
}

第四种方法：相对绝对定位法

html代码可以和上面两种一样，也可以去掉那个class为flo-right的div，即右边的元素可以不需要统一包在一个div中,在这里我去掉了这个包，可以通过firebug查，这里的html可以不在前面，而是在里面的其他位置。如下面这个demo，我就把图片放在p标签后面了

图文混排demo 4，相对绝对定位法

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

css code

#demo4{
    position:relative;
    padding-left:210px;
}
#demo4 img{
    position:absolute;
    left:0;
    top:0;
}

第五种方法：float加padding法

这个方法是偶然在实践中发现的，对于右边的内容也可以不需要元素来包裹起来。这里对整个包裹图片和文字的div设置padding-left，然后img设置左浮动和负的左margin等于其父级元素的padding-left值就可以了（同样这里也出现ie6的3px bug）

图文混排demo 6，float加padding法

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

css code

#demo6{
    padding-left:210px;
}
#demo6 img{
    float:left;
    margin-left:-210px;
}

交互式图文混排

这种情况比较适合于追求变化的客户，左右交互式排列确实比单一的好看点，可以在偶数行加个class或者使用css3选择器选择偶数行（:nth-child(2n)）来达到这个效果，本实例就是使用了在偶数行加一个fr的class

图文混排demo 5，交互式图文混排

Name of the event

Suspendisse potenti. Nulla non lacus purus, non accumsan risus. Nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. Nullam at nunc eros, sit amet tempor ante. Curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. Suspendisse nibh est, tincidunt at luctus congue.

see detail...

Name of the event

Suspendisse potenti. Nulla non lacus purus, non accumsan risus. Nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. Nullam at nunc eros, sit amet tempor ante. Curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. Suspendisse nibh est, tincidunt at luctus congue.

see detail...

html code

<div id="demo5" class="demo">
    <div class="events_item">
      <div class="events_intro fr">
        <h3>Name of the event</h3>
        <p>Suspendisse potenti. Nulla non lacus purus, non accumsan risus. Nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. Nullam at nunc eros, sit amet tempor ante. Curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. Suspendisse nibh est, tincidunt at luctus congue.</p>
        <p class="more"><a href="#">see detail...</a></p>
      </div>
      <img src="images/img250-165.jpg">
    </div>
    <div class="events_item">
      <div class="events_intro">
        <h3>Name of the event</h3>
        <p>Suspendisse potenti. Nulla non lacus purus, non accumsan risus. Nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. Nullam at nunc eros, sit amet tempor ante. Curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. Suspendisse nibh est, tincidunt at luctus congue.</p>
        <p class="more"><a href="#">see detail...</a></p>
      </div>
      <img src="images/img250-165.jpg">
    </div>
</div>

css code

#demo5 .events_item {
    border-bottom: 1px solid #E2E2E2;
    clear: both;
    overflow: hidden;
    padding: 20px 0;
    width: 620px;
}
#demo5 .events_intro {
    float:left;
    display:inline;
    width: 370px;
}
#demo5 .fr{
    float:right;
}
#demo5 img{
    float:left;
}
#demo5 .events_intro h3 {
    background: none repeat scroll 0 0 #C13832;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 25px;
    padding-left: 10px;
    text-transform: uppercase;
}
#demo5 .events_intro p {
    line-height: 1.5;
    padding: 10px;
    margin:0;
}
#demo5 .events_intro .more {
    padding: 0;
    text-align: right;
}
#demo5 .more a {
    color: #C13832;
    margin-right: 20px;
    text-decoration: underline;
}
注：本文的图文混排均指图片和文字占据一边，互不干扰。对于那种文字围绕着图片的直接设置图片的float就可以了，比较简单，在这里不做介绍

原文来之www.w3cplus.com
时间： 2024-10-10 04:34:22

超全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文字环绕图片 图文混排效果

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

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-eq

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:主

Android图文混排（一）－实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中,需要支持文本和图片的混合插入,下图演示输入的示例: 当会议创建完成以后,保存数据到服务器,然后查看刚刚创建好的会议,如图: 一.明确需求 首先,点击"会议详情"文本框中,正常输入文本,然后点击左下角的图片图标,进入系统的相册用来选择一张图片并插入到文本框中,你还可以将光标停留在任意的文字中间,完成图片的插入,回退建即可以逐个删除文字,也可以删除图片.

TextKit实现图文混排

//    NSAttributedString   这个类可以设置文本属性:加粗.斜体.删除线.下划线... //    NSMutableAttributedString  可变属性文本:可以动态添加文本的属性 NSString *text = @"iOS实现图文混排的方式:1.WebView     html+javascript 2.CoreText   (C语言实现的框架) "; UITextView *textview = [［UITextView alloc］ initW

Android 自绘TextView解决提前换行问题，支持图文混排

先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢到下一行开始显示.这样本来没有错.一是咱们中国人都是方块字,怎么都放得下,不存在英文的这个问题.所以不习惯那个排版.二是如果TextView里面有图片,如图,不知道判断单词的代码是怎么弄得,总之它觉得最后一个啦字和后面的一串表情应该是一个整体,不能分开,就一起丢到第二行了,也就造成了这种难看的排版.