将 div 的内容浮动到 div 的底部。将所有内容粘贴到周围 div 的底部

Question

我正在尝试将第二张图片内联放置在之前的图片旁边，第二张图片较小，我希望它与旁边较大的图片位于同一底线上。这将在第二张图片上方创建一个空白，我可以在其中放置少量文字。

我的问题是当我使用 background-size:、height: 和 width: 来改变图像的大小时，它只是转到其周围 div 的左上角。

我计划在小图片旁边再放 4 张小图片，所以我想请问任何人都可以整理 div 和 css 的位置，以便我可以轻松地在前一张图片旁边添加更多图片，

这是一张图片，可让您了解我想要实现的目标，红色框显示我想要放置的位置，另一个红色框是我将拥有下一个皮肤的位置。

LINK

我尝试过的事情：

Bottom:0

margin-top（将其向下推）虽然这并没有为我在较小的图像上方添加文本留下空间

padding-top:

这是我当前的 CSS：

#secondinner {
width:980px;
margin:0 auto;
overflow: hidden;
}

#dailyskin {
width:120px;
height:20px;
background-color:#336699;
color:white;
font-size:14px;
text-align:center;
padding-top:1px;
}


#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;

}

#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:5px;


}

#downloadbutton1 {
width:100%;
}

#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin {
width:100px;
overflow:hidden;
float:left;
padding-left:10px;

}

这里是 HTML：

<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>

<div id="firstskin">
    <div id="topskin"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="secondskin">
    <div id="topskin2"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name =   "Download"> Download </button></a>
</div>

</div>

This is the third section to the index page.


</div>

这是一个 JS fiddle 来告诉你我的意思，

http://jsfiddle.net/bjbear123/qdwgpaqc/

Answer 1

你通过bottom:0; 做的没错 你错过的事情是设置 position:absolute; 和外部 div position:relative;

这是一个小提琴：http://jsfiddle.net/Nive00/qdwgpaqc/2/

Answer 2

如果您不希望/不能使用表单元格，因为 misterManSam 回答您可以使用绝对位置的嵌套 div。

.wrapper{
position: relative;
height: 200px;
width: 100px;
}

.content{
position: absolute;
bottom: 0;
}

<div class="wrapper">
    <div class="content">
        <img src="whatever.jpg" />
    </div>
</div>

还有一个小 jsbin http://jsbin.com/jiqakefu/1/

Answer 3

display: table-cell; 和 vertical-align: bottom 可能是一个很好的解决方案。

Have a jsBin!

HTML

<div class="skin-wrap">
    <div>
        <img src="http://www.placehold.it/100X300" />
        <button>Download</button>
    </div>

    <div>
        <p>text above </p>
        <img src="http://www.placehold.it/100X200" />
        <button>Download</button>
    </div>      
</div>

This is the third section to the index page.

CSS

.skin-wrap { 
    display: table;
}
.skin-wrap > div { 
    display: table-cell;
    width: 100px;
    vertical-align: bottom;
    padding: 10px;
}

Answer 4

一个简单的解决方案是增加 topskin2 的上边距。

#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;

我在 jsfiddle 上试过这个，两个下载按钮都是内联的。 您可以根据需要设置边距，如果您想要两者之间的空间，则可以使用 margin-left 来创建间隙。