欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> DIV居左靠右显示篇
靠右居左需要样式单词为CSS浮动,设置即可实现居左显示。
为了观察DIV是否靠左显示，我们设置其css宽度为300高度为120px；边框为1px黑色边框，为&.div-left&
1、css代码：
.div-left{width:300height:120border:1px&solid�float:left}&
2、应用代码片段：
&class=&div-left&此盒子是居左的&
3、完整代码：
&!DOCTYPE&html&&xmlns=&http://www.w3.org/1999/xhtml&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&divcss5居左实例&&.div-left{:300:120:1px&solid�float:left}&/*&说明：float:left设置居左靠左&*/&&&&&class=&div-left&此盒子是居左的&&&
大家可动手将以上代码拷贝使用观察结果，是否实现盒子靠左居左显示。
4、案例截图：
实现盒子靠左居左实例截图
我们设置靠左靠右、居左居右都使用样式单词float，其样式值为left是居左，right是居右。
相关阅读：
5、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 17:05
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台以下技巧相信是比较实用的，让一行文字始终显示在某个Div的最底部，做前端开发，肯定什么情况都要碰到，虽然这个不常用，不过也是会用到的。用到position:relative、position:属性。text-align:这行是定义显示在最底行的文字水平居中，可以不设置，但文字会靠左显示。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&
&http://www.w3.org/TR/html4/loose.dtd&&
&title&CSS控制文字显示在Div底部&/title&
&style type=&text/css&&
height:300
border:1px solid #333333;
text-align:
position:relative
margin:0px
&div id=txt&
&p&这行文字会始终显示在方框的底部&/p&
本代码适用Div高度固定，也就是定义了高度的情况下，其实不定义高度的时候，它也是显示在最底部，因为没有高度的情况下，Div会自动适应容器内的内容。
本类推荐文章
本类最新更新
最新源码下载温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(2365)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'DIV+CSS一种简单的左边图片右边多行文字的布局',
blogAbstract:'DIV+CSS一种简单的左边图片右边多行文字的布局',
blogTag:'dt,content,span,div,css',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:4,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}