文本和图像在背景div中彼此相邻

时间:2014-02-13 06:22:22

标签: html css

我对css不是很好......也许有人可以帮助我......

我正在尝试将文本放在我的jquery图像滑块旁边...我无法弄明白。

slider_bg只是背景图片......我应该删除这个div并将其与我的其他人合并......

HTML:

          <div class="slider_bg">
          <div id="caption">MY CAPTION TEXT LEFT OF IMAGE
           <div id="banner-fade">
            <ul class="bjqs">
            <li><img src="images/img1.jpg"></li>
            <li><img src="images/img2.jpg"></li>
            <li><img src="images/img3.jpg"></li>
            </ul>
           </div>
           </div>
          </div>

的CSS:

#banner-fade {
display: block;
right:-358px;
top:17px;
margin-left:-10px;
margin-top:-10px;
padding:1px;
border:1px solid #000000;
}

#caption {
    top: 1px;
    left: 2px;
    }

.slider_bg {
width:100%;
height:404px;
background:url(../images/bg_bot.jpg) top center repeat;
position:relative;
overflow:hidden;
box-shadow:0 0 5px rgba(0, 0, 0, .4);
-moz-box-shadow:0 0 5px rgba(0, 0, 0, .4);
-webkit-box-shadow:0 0 5px rgba(0, 0, 0, .4);
margin-bottom:35px;
}

当我这样做时,它显示左侧的文字..但是图像没有正确对齐,就像我想要的那样在右侧...接近右侧边框并居中顶部/底部

1 个答案:

答案 0 :(得分:1)

要制作float:leftfloat:right,您必须在div中添加文字并将其float:left#banner-fade float:right < / p>

但是display:inline-block应该可以使用它,因为它是

检查Fiddle demo