需要得到这个（顶部图片/框）：
但是目前，这是发生了什么：
我将顶部的框设置为文本框+图片的确切宽度，但是该框爬到了图片的左侧，并且该图片也没有粘贴到该列的右侧。
JsFiddle链接：http://jsfiddle.net/JkA25/
（由于我不能仅张贴jsfiddle，因此代码如下）
HTML：
<div class="rightCol1">
<div class="theBox2"><a href="#">
<img src="http://imgur.com/o4G7tD0.jpg">
<div class="txtBox2"><h4>2014 02 16</h4><h5>vasaros <br> krepšinio <br> stovykla <br> ignalinoje 2014</h5>
</div></a>
</div>
<div class="theBox3"><a href="#">
<img src="http://imgur.com/3Gp62Mt.png">
<div class="txtBox3"><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5>
</div> </a>
</div>
<div class="theBox3"><a href="#">
<img src="http://imgur.com/3Gp62Mt.png">
<div class="txtBox3"><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas <br>šukutis</h5>
</div> </a>
</div>
CSS：
.rightCol1{
float:right;
margin-top:10px;
}
.theBox2{
border-radius: 5px;
width: 483px;
height: 244px;
overflow: hidden;
position: relative;
margin: 10px 0px 40px 15px;
}
.txtBox2{
position: absolute;
height: 244px;
width: 175px;
background:url(http://i.imgur.com/sGWRvSp.png?1);
bottom: 0;
left:0px;
}
.theBox3{
width: 234px;
height: 330px;
border-radius: 5px;
overflow: hidden;
position: relative;
margin: 10px 0px 40px 15px;
display:inline-block;
}
.txtBox3{
position: absolute;
height: 140px;
width: 100%;
background:url(http://i.imgur.com/sGWRvSp.png?1);
bottom: 0;
}
h4{
padding:0;
margin:10px 0 10px 15px;
font-size:13;
font-weight:bold;
color:#e6540c;
}
h5{
padding:0;
margin:10px 0 10px 15px;
font-size:16;
font-weight:400;
text-transform:uppercase;
color:rgb(230,230,230);
}
最佳答案
您可以添加以下行，您可以使用较小的图像并更改背景大小。该图像位于Div后面，因此只需将其设置在右侧即可。这是代码。
.theBox2 a img {
float: right;
}
.txtBox2{
position: absolute;
height: 244px;
width: 175px;
background:url('http://i.imgur.com/sGWRvSp.png?1');
background-size: 420px;
bottom: 0;
left:0px;
}
关于html - 侧面带有文本框的HTML CSS图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24408966/