html - 如何使文本环绕 jssor 图像 slider ？

Question

我在主页上使用 jssor 图像 slider 。旁边是一段文字。我无法让文本环绕 jssor 图像 slider 。我试过 float 和文本对齐，但无法正常工作。有谁知道如何让文本环绕 jssor 图像 slider ？代码如下:

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'