css的绝对布局问题,怎么让子元素置于底部?

html-css06

css的绝对布局问题,怎么让子元素置于底部?,第1张

1、首先设置要了解网页页面布局框架结构,设定宽高和边框,以及设置好class或者ID名称。

2、打开Dreamweaver CS5,点击新建HTML。

3、根据设定的网页布局,设置div网页结构。

4、添加div标签的class名称,这里也可以使用ID类名。

5、 编辑CSS控制div块的宽高和背景。

6、 这样就可以让子元素置于底部。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<style>标签中,输入css代码:label{float:leftpadding-top:4px}。

3、浏览器运行index.html页面,此时label的底部成功和select的底部对齐。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Document</title>

        <style>

            body {

            font-size: 12px

            }

            

            #div1 {

            width: 400px

            margin: 20px auto

            /*border:1px solid red*/

            border-top: 1px solid blue

            border-right: 1px solid blue

            border-left: 1px solid blue

            border-bottom: 1px solid red

            height: 40px

            position: relative

            }

            

            #div1 div{

            width: 80px

            height: 30px

            font-size: 14px

            line-height: 30px

            text-align: center

            float: left

            background: #00FF00

            color: #FFFFFF

            border-left: 1px solid #eee

            margin-left: 10px

            position: absolute

            bottom: 0

            }

            #div1 .mydiv2 {

            left: 90px

            }

            #div1 .mydiv3 {

            left: 180px

            }

        </style>

    </head>

    

    <body>

        <div id="div1">

            <div>建设文明</div>

            <div>新浪微博</div>

            <div>意见征求</div>

        </div>

    </body>

</html>