1

需要得到这个（顶部图片/框）：

但目前，这就是发生的事情：

我已经在顶部设置了框，使其与文本框+图片组合的宽度完全相同，但是框爬到了图片的左侧，并且图片也不会粘在列的右侧。

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

8 回答 8

1

你可以试试下面的代码：

演示

.theBox2 img{float:right}
于 2014-06-25T12:48:22.647 回答
0 
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>
于 2014-06-25T13:25:45.540 回答
0

尝试这个：

    .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

于 2014-06-25T12:47:17.517 回答
0

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

.theBox2 img
{
 width:100%;
}
于 2014-06-25T12:47:19.320 回答
0

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

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

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

于 2014-06-25T12:46:21.720 回答
0

您没有任何东西会导致图像向右移动，越过文本框。填充容器可以解决这个问题，并且绝对定位的文本保持在原来的位置：

.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/

于 2014-06-25T12:46:30.040 回答
0

您可以添加以下行，您有一个较小的图像并更改了背景大小。图像位于 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;


}
于 2014-06-25T12:50:15.537 回答
0

用这个。

.theBox2 a img{ float: right; }
于 2014-06-25T12:50:34.200 回答