我试图将第二张图片与之前的图片放在一起,第二张图片较小,我希望它与旁边较大的图片位于同一底线上。这将在第二张图片上方创建一个空隙,我可以在其中放置一小段文字。
我的问题是,当我使用 background-size:、height: 和 width: 来更改图像的大小时,它只会移动到周围 div 的左上角。
我计划在小图片旁边再放 4 张小图片,所以我想请问谁能解决 div 和 css 的位置,以便我可以轻松地在前一张图片旁边添加更多图片,
这是一张图片,可让您了解我要实现的目标,红色框显示我希望它放置的位置,另一个红色框是我将拥有下一个皮肤的位置。
我尝试过的事情:
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 来向你展示我的意思,
最佳答案
display: table-cell;
加上 vertical-align: bottom
可能是一个很好的解决方案。
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;
}
关于html - 将 div 内容 float 到 div 的底部。将所有内容粘贴到周围 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25200984/