我试图将第二个图像内联到之前的图像旁边,第二个图像较小,我希望它坐在与旁边较大的图像相同的底线上。这将在第二张图片上方创建一个空白,我可以在那里放一点文字。
我的问题是,当我使用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小提琴来告诉你我的意思,
http://jsfiddle.net/bjbear123/qdwgpaqc/display: table-cell;
加vertical-align: bottom
是很好的解决方案。
有一个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;
}
如果你不想/不能使用表-单元格作为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/
一个简单的解决方案是增加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来创建空白
您通过bottom:0;
这样做是正确的您错过的是设置position:absolute;
和外部div position:relative;
这里有一个小提琴:http://jsfiddle.net/Nive00/qdwgpaqc/2/