You are here
图文混排解决方案
图文混排解决方案
第一种方法：背景图片法
这种方法适用于非动态内容，图片用于装饰的情况下。主要是设置父元素的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.
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.
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就可以了，比较简单，在这里不做介绍