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

これを試して：

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

JSF ドル:

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 
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 に答える