css如何使元素沿底部对齐

想要绿色部分div挨着红线,<style>body{font-size:12px;}#div1{width:400px;margin:20pxauto;/*border:... 想要绿色部分div挨着红线,
<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; } .mydiv {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; }</style>

<body><div id="div1"> <div class="mydiv">建设文明</div> <div class="mydiv">新浪微博</div> <div class="mydiv">意见征求</div></div></body>
展开
 我来答
匿名用户
2019-06-06
展开全部
<!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>
一骑当后
推荐于2017-09-10 · 知道合伙人数码行家
一骑当后
知道合伙人数码行家
采纳数:40299 获赞数:306414
网络、设备维护、电路、弱电检测。

向TA提问 私信TA
展开全部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style type="text/css">
#txt{
 height:300px;
 width:300px;
 border:1px solid #333333;
 position:relative
}
#txt p{
 position:absolute;
 bottom:0px;
 padding:0px;
 margin:0px
}
</style>
</head>
<body>
<div id="txt">
<p><a href="http" target="_blank">IT</a></p>
</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
ck_2036
2013-03-14 · TA获得超过906个赞
知道小有建树答主
回答量:904
采纳率:33%
帮助的人:723万
展开全部
vertical-align: bottom;
追问
不行
追答
#div1 加样式
display: table-cell;
vertical-align: bottom;

或者你直接用table 不要用div了 (XXX)
低版本IE不支持table-cell
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
0928524035
2013-03-14 · TA获得超过106个赞
知道答主
回答量:115
采纳率:0%
帮助的人:60.5万
展开全部
在 .mydiv{margin-top:*.px};添加适当的像素,让它在底部对齐
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
可爱的桐原知子C6
2013-03-14
知道答主
回答量:31
采纳率:100%
帮助的人:8.8万
展开全部
<div id="div1" style="position:fixed;bottom:0;"></div>
不用外部调用的时候 直接写在DIV里就可以
追问
不行
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式