如何用css将底部的内容定位到顶部

html-css022

如何用css将底部的内容定位到顶部,第1张

将底部的内容定位到顶部,只要在css层上面加上一个浮动,将定位至top设置成0即可。说明如下:

position:absolute(将对象浮动)

top:0(将对象定位对顶部)

整体css示范如下:

<div style="position:absolute top:0 width:100% height:50px background:#000 color:#FFF text-align:center">内容顶部</div>

如要将内容放至底部,只需将top:0修改成bottom:0即可,整体css未范如下:

<div style="position:absolute bottom:0 width:100% height:50px background:#000 color:#FFF text-align:center">内容底部</div>

希望我的回答能令你满意!

不把上下用2个div分开,设置好图片的样式后,文字让其自动即可

<style type="text/css">

.divbox{ width:500px height:500px border:1px solid red}

.divbox img{ float:left margin-right:10px}

</style>

</head>

<body>

 <div class="divbox"><img src="images/bg_grid.png" width="60" height="60" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

</body>