侧面带有文本框的 HTML CSS 图片

Question

需要得到这个(最上面的图片/框):

但目前，情况是这样的:

我已经将顶部的框设置为文本框 + 图片组合的精确宽度，但是框爬到了图片的左侧，图片没有粘在列的右侧也是。

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);
    }

Answer 1

你可以试试下面的代码:

Demo

.theBox2 img{float:right}