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

Question

我不太擅长 CSS...也许有人可以帮助我..

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

slider_bg 只是背景图片...我应该删除这个 div 并将其与我的其他 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;
}

当我这样做时，它在左侧显示文本..但是图像没有像我希望的那样正确对齐在右侧...靠近右侧边框和居中的顶部/底部.

Answer 1

要制作 float:left 和 float:right，您必须将文本添加到 div 中并使其 float : left 和你的 #banner-fade float:right

但是 display:inline-block 应该可以正常工作

检查 Fiddle demo