Question

我在主页上使用了jssor图像滑块。旁边是一段文字。我无法让文本环绕jssor图像滑块。我试过浮动和文本对齐，但无法让它工作。有没有人有任何想法如何让文本环绕jssor图像滑块？代码如下：

HTML：

<div class="content">
<!-- image slider -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:
800px; height: 355px; background: #c6eafb; overflow: hidden; margin-right: 2%; margin
bottom: 1.5%; z-index: -1;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no
repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:
800px; height: 356px; overflow: hidden;">
        <div>
            <img u="image" src="images/mombaby.jpg" />
        </div>
        <div>
            <img u="image" src="images/baby.jpg" />
        </div>
        <div>
            <img u="image" src="images/family.jpg" />
        </div>
        <div>
            <img u="image" src="images/finalization.jpg" />
        </div>
        <div>
            <img u="image" src="images/baby2.jpg" />
        </div>
    </div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px;
left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px;
right: 8px"></span>
<!-- Arrow Navigator Skin End -->       

<a style="display: none" href="http://www.jssor.com">banner slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<!-- Jssor Slider End -->
<p class="text">Welcome to Adoption Covenant
Making the decision to adopt a child can be difficult but the process involved with
adopting doesn’t have to be. Adoption Covenant is a licensed, full service adoption
agency for both domestic and international adoption. Our goal is to place children for
adoption with loving families while simplifying and reducing the expense and heartache
commonly involved with the process. Our unique adoption services are rooted in a deep
understanding of adoption laws and our commitment to improving the lives of parentless
children around the world.

"Unless someone like you cares a whole awful lot, nothing is going to get better. Its
not."
Dr. Seuss, The Lorax
</p>
</div>

CSS：

.content {
margin-right: 3%;
margin-left: 3%;
z-index: 100;
background-color: #FFFFFF;
opacity: .85;
border-radius: 30px;
height: 365px;
padding: 1%;
}

.text {
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
font-weight: 400;
color: #000066;
}

/* image slider */
/* jssor slider arrow navigator skin 05 css */
/* .jssora05l              (normal)
.jssora05r              (normal)
.jssora05l:hover        (normal mouseover)
.jssora05r:hover        (normal mouseover)
.jssora05ldn            (mousedown)
.jssora05rdn            (mousedown) */
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
/* image slider */

Answer 1

请为'slider1_container'指定'float：left'。

<div id="slider1_container" style="... float: left; ..." ...>

参考'Jssor.Slider.FullPack \ demos-jquery \ responsive-slider-float-text.source.html'

如何围绕jssor图像滑块进行文本环绕？

1 个答案: