我正在使用基础框架来创建网站，我在将父类容器的底部对齐div类容器时遇到了一些问题。如何将div对齐到父元素的底部

这是问题的照片。

注意到的第一形象，一切都正确对齐。另一方面，第二个图像

的内容是离开的。我已将它设置为bottom:0;在CSS中，但它不工作。

这里是CSS：

.container-home {

max-width: 1175px;

background: #fff;

margin: 0 auto;

padding: 20px 0px 0 0px;

position: relative;

z-index: 1;

}

.first-title-music {

background: url('http://cdn.ratedrnb.com/2016/06/large-title.png');

width: 100%;

max-width: 425px;

height: 160px;

position: absolute;

bottom: 0;

padding: 5% 0 0 3%;

clear: bottom;

}

.artist-title {

color: #fff;

font-family: poppins;

font-weight: 700;

text-transform: uppercase;

font-size: 36px;

line-height: 22px;

}

.song-title {

color: #fff;

font-family: poppins;

font-weight: 300;

text-transform: uppercase;

font-size: 24px;

}

.big-play {

position: absolute;

top: 150px;

left: 170px;

}

.second-title-music {

background: url('http://cdn.ratedrnb.com/2016/06/small-title.png');

width: 100%;

max-width: 190px;

height: 70px;

position: absolute;

bottom: 0;

padding: 0;

}

.artist-title-small {

color: #fff;

font-family: poppins;

font-weight: 700;

text-transform: uppercase;

font-size: 18px;

line-height: 20px;

}

.song-title-small {

color: #fff;

font-family: poppins;

font-weight: 300;

text-transform: uppercase;

font-size: 14px;

}

.big-play {

position: absolute;

top: 150px;

left: 170px;

}

这里是HTML：

MARIO

I NEED MORE

ALICIA KEYS

IN COMMON

这里就是我试图完成。

没有任何人有一个解决方案，为什么底部的HTML代码拉伸是远远超出了父div的高度的第二部分对准

。

html设置在父元素底部对齐,如何将div对齐到父元素的底部相关推荐

pandas中set_option的常用设置：显示所有行、显示所有列、控制浮点型精度、每个数据元素的显示字符数、对齐形式等
pandas中set_option的常用设置:显示所有行.显示所有列.控制浮点型精度.每个数据元素的显示字符数.对齐形式等 #pandas中set_option的常用设置详细参考pandas API ...
行内元素设置靠右对齐_CSS中实现行内块元素对齐
目标:行内块元素实现对齐的几种方式 eg. 我希望下列两个单词文本和后面的两个图片能实现1.中线对齐2.靠右.(图1变为图2) 图1 图2 html: Gmail images 从html可以看出是两 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
absolute元素在text-align属性下的对齐显示
1. absolute元素是否可以响应text-align属性? 众所周知,text-align属性可以有效作用于inline/inline-block水平的元素,那么应用了position:absl ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
想调节—下父元素的透明度，但是又不影响子元素的透明度，怎么破？
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...
div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式
目录零.问题描述和基本情况介绍案例: 问题及疑问: 一.background-size:cover;和background-size:100%;的区别: 1.background-size:100 ...
div水平垂直居中 div相对于父元素水平垂直居中 div相对于网页水平垂直居中
div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局父元素作为容器设置宽高.弹性布局.水平轴和交叉轴居中 display:flex; justify-content:center; ...
两端文字对齐css,css两端对齐怎么设置，css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...

html设置在父元素底部对齐,如何将div对齐到父元素的底部

MARIO

I NEED MORE

ALICIA KEYS

IN COMMON

html设置在父元素底部对齐,如何将div对齐到父元素的底部相关推荐

最新文章

热门文章