试图在滑块旁边放置一个div

Question

我一直在寻找一个响应滑块的时间，我终于找到了一个。我改变了宽度，只占了一半的页面，因为在另一半我希望有一个文本区域。
然而，文本位于滑块下方而右侧而不是直接位于右侧。
我希望第二双眼睛可以帮助我抓住错误I＆ ＃39;制作。

＆＃13;

＆＃13;

.home-content {
	background-color: #fff;
	width: 90%;
	padding-top: 3em;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-shadow: 0px 1px 1px #000;
	-moz-box-shadow: 0px 1px 1px #000;
	box-shadow: 0px 1px 1px #000;
}
#slides {
	float: left;
}
#latest-posts {
	float: right;
}
.rslides {
  	position: relative;
  	top: 1em;
  	list-style: none;
  	overflow: hidden;
  	width: 50%;
  	padding: 0;
  	margin: 0;
}

.rslides li {
  	-webkit-backface-visibility: hidden;
  	position: absolute;
  	display: none;
  	width: 100%;
  	left: 0;
  	top: 0;
}

.rslides li:first-child {
  	position: relative;
  	display: block;
  	float: left;
}

.rslides img {
  	display: block;
  	height: auto;
  	float: left;
  	width: 100%;
  	border: 0;
}

＆＃13;

<div class="home-content">
		<div id="slides">
			<ul class="rslides">
  				<li><img src="../images/slider/test-slide-1.svg" alt=""></li>
  				<li><img src="../images/slider/test-slide-2.svg" alt=""></li>
			</ul>
		</div>
		<div id="latest-posts">
			<p>TEST TEXT</p>
		</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用display: inline-block代替float: left和float: right以及#slides和#latest-posts的百分比宽度。

.home-content {
	background-color: #fff;
	width: 90%;
	padding-top: 3em;
	margin-left: auto;
        text-align: center;
	margin-right: auto;
	-webkit-box-shadow: 0px 1px 1px #000;
	-moz-box-shadow: 0px 1px 1px #000;
	box-shadow: 0px 1px 1px #000;
}
#slides {
	display: inline-block;
        vertical-align: middle;
        width: 49%;
}
#latest-posts {
	display: inline-block;
        vertical-align: middle;
        width: 49%;
}
.rslides {
  	position: relative;
  	list-style: none;
  	overflow: hidden;
  	width: 100%;
  	padding: 0;
  	margin: 0;
}

.rslides li {
  	-webkit-backface-visibility: hidden;
  	position: absolute;
  	display: none;
  	width: 100%;
  	left: 0;
  	top: 0;
}

.rslides li:first-child {
  	position: relative;
  	display: block;
  	float: left;
}

.rslides img {
  	display: block;
  	height: auto;
  	float: left;
  	width: 100%;
  	border: 0;
}

<div class="home-content">
		<div id="slides">
			<ul class="rslides">
  				<li><img src="http://placehold.it/350x150" alt=""></li>
  				<li><img src="http://placehold.it/500x150" alt=""></li>
			</ul>
		</div>
		<div id="latest-posts">
			<p>TEST TEXT</p>
		</div>
</div>