侧面带有文本框的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

您可以尝试以下代码：

演示

.theBox2 img{float:right}

Answer 2

只需使水平图片向右浮动即可。

<img src="http://imgur.com/o4G7tD0.jpg" style="float:right;">

图片不适合预定义的尺寸，请在此处检查更新的小提琴。

Answer 3

您什么都不会导致图像向右移动，超过文本框。 填充容器可解决此问题，并且绝对定位的文本将保留在原处：

.theBox2{
  border-radius: 5px;
  width: 483px;
  height: 244px;    
  overflow: hidden;
  position: relative;
  margin: 10px 0px 40px 15px;
  padding-left: 175px;
  box-sizing: border-box;
}

示例： http ： //jsfiddle.net/JkA25/1/

Answer 4

尝试这个：

    .theBox2 {
        border-radius: 5px;
        width: 483px;
        height: 244px;
        overflow: hidden;
        position: relative;
        margin: 10px 0px 40px 15px;
        float:left;
    }
    .theBox2 a img {
        float: right;
    }
    .txtBox2 {
        position: absolute;
        height: 244px;
        width: 175px;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        bottom: 0;
        left:0px;
        float:left;
    }
    .theBox3 {
        width: 234px;
        height: 330px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        margin: 10px 0px 40px 15px;
        float:left;
    }

的jsfiddle：

http://jsfiddle.net/JkA25/4

Answer 5

在Box2下为图像添加100％的宽度。

.theBox2 img
{
 width:100%;
}

Answer 6

您可以添加以下行，图像较小，并且背景大小也已更改。 该图像位于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;


}

Answer 7

用这个。

.theBox2 a img{ float: right; }

Answer 8

Use Below CSS Code:

<!doctype html>
<html lang="en">
<head>
<style>
    .rightCol1{

        float:right;
        margin-top:10px;
        background:#d0d0d0;
        padding:7px;
    }   

    .theBox2{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
/* width: 483px; */
height: 244px;
overflow: hidden;
position: relative;
/* margin: 5px 0px 5px 5px; */

    }
.theBox2 a img{
right:0px; position:absolute;
height: 244px;
width: 308px;}
    .txtBox2{
        position: absolute;
        height: 244px;
        width: 175px;
        background:url(http://i.imgur.com/sGWRvSp.png?1);
        background-position:center;
        bottom: 0; 
        left:0px;


    }
    .theBox2 a{ width:308px;}
    .theBox3{

        width: 234px;
        height: 330px;
        border-radius: 5px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px; 
        overflow: hidden;
        position: relative;
        margin-top: 15px;
        display:inline-block;
    }
.theBox3:first-child{margin-right:10px;} .theBox3:last-child{margin-left:10px;}
    .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:#e84c3d;
    }

    h5{ 
        padding:0;
        margin:10px 0 10px 15px;
        font-size:25;
        font-weight:400;
        text-transform:uppercase;
        color:rgb(230,230,230);
    }

</style>
</head>
<body>
<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&#353;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 visa klubo   <br> istorija </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>&#353;ukutis</h5>
                </div> 
            </a>            
        </div>
</div>

</body>
</html>