CSS/HTML Div Alignment

I'm trying to align a div at the bottom of another div (parent/child), but I can't seem to figure it out. ![enter image description here][1] What I want to do is align the text that has the date as well as the edit/delete links to the bottom of the "bubble". Here's the code I'm using:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo, porta vel lacinia quis, convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem.
June 9th, 2011 at 12:01 pm – Edit Delete
.bubble_wrap { overflow: auto; margin-bottom: 10px; } .bubble_wrap .bubble_image { float: left; margin-right: 0px; margin-bottom:3px; } .bubble_wrap .bubble_image img { max-width: 85px; max-height: 85px; } .bubble_wrap .bubble_content { width: 565px; min-height:60px; background: #fbfcfe; background: -moz-linear-gradient(top, #fbfcfe 0%, #f3f4f6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfcfe), color-stop(100%,#f3f4f6)); background: -webkit-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); background: -o-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); background: -ms-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfcfe', endColorstr='#f3f4f6',GradientType=0 ); background: linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); border:1px solid #CFD0D2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float: right; padding:10px; position:relative; } .bubble_wrap.bubble_right .bubble_image { float: right; margin-right: 0px; margin-left: 0px; } .bubble_wrap.bubble_right .bubble_content { float: left; } .bubble_wrap.bubble_right .right { text-align:right; } .bubble_wrap .date { color: #888; font-size:11px; display:block; } .bubble_wrap .date a:link, a:visited, a:hover { text-decoration:none; font-weight:bold; color:#888; } [1]: http://i.stack.imgur.com/PPqJ3.png

以上就是CSS/HTML Div Alignment的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准