CSS实现左图右文混排布局的方法

浏览:3691 发布日期:2016年08月22日分类:前端开发关键字: html css

本文实例讲述了CSS实现左图右文混排布局的方法。分享给大家供大家参考。具体分析如下:
CSS图文混排是我们布局网页时经常要用到的布局方法,本实例就是一个典型的左图右文的常用布局,美观大方,方法简便,你可以运行一下代码,看下效果,是不是你想要的?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="www.w3.org/1999/xhtml">

<head>

<title>CSS左图右文混排布局</title>

<meta http-equiv="content-Type" content="text/html;charset=utf-8">

<style type="text/css">

* {

margin:0;

padding:0;

}

h3 {

font-size:12px;

color:#0066CC;

line-height:2em;

}

p {

font-size:12px;

text-indent:2em;

line-height:1.5em;

}

#container {

width:300px;

margin:0 auto;

margin-top:10px;

padding-right:3px;

border:1px dotted #666;

position:relative;

}

#leftContent {

position:absolute;

top:4px;

left:4px;

}

#leftContent img{

height:80px;

width:100px;

border:1px solid #ccc;

padding:2px;

}

#rightContent {

margin-left:120px;

}

</style>

</head>

<body>

<div id="container">

<div id="leftContent"><img src="http://www.baidu.com/images/2015513172559452.jpg"></div>

<div id="rightContent">

<h3><a href="#">十年朋友,一生财富</a></h3>

<p>十年之间,我不认识你,你不属于我,走过渐渐熟悉的街头,十年之后,我们是朋友,还可以问候,只是再也找不到。。。</p>

</div>

</div>

</div>

</body>

</html>

希望本文所述对大家的div+css网页设计有所帮助。

扫一扫上方二维码关注我们,可获得更多资讯!

最佳答案

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

收藏

赞

京牛教育

积分:176 等级:LV1

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。