将网页推到一边的元素？

Question

我有两个div彼此相邻，并且使页面更大并且能够滚动到一边？任何人都可以帮忙吗？我试过漂浮div并清除它们，但那没有运气。

代码如下：

<div class="options">
        <div class="wrapper">
            <div class="cpc-courses">
                <h2 class="cpc-courses-h2"> Driver CPC Courses </h2>

                <img class="truck3"src="images/truck3.png">

                <p class="cpc-courses-para">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed      do eiusmod
                proident, sunt in culpa qui officia deserunt mollit. </p>

                <p class="read-more"> <a href="#"> Read More </a></p>
            </div>

        <div class="firstaid-courses">
            <h2 class="firstaid-courses-h2"> First Aid Courses </h2>

            <img class="truck3"src="images/firstaid.png">


            <p class="firstaid-courses-para">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            proident, sunt in culpa qui officia deserunt mollit. </p>

            <p class="read-more"> <a href="#"> Read More </a></p>

        </div>
    </div>
</div> 

.options {
    height: 504px;
    position: relative;
    top: 96px;
    background-color: #eee;
}

.cpc-courses {
    padding: 40px;
}

.cpc-courses-h2 {
     font-family: Lato;
     font-weight: normal;
}

.cpc-courses-para {
    font-family: Lato;
    font-weight: 300;
    width: 300px;
}

.firstaid-courses {
    padding: 40px;
    position: relative;
    top: -476px;
    left: 500px;
}

.firstaid-courses-h2 {
    font-family: Lato;
    font-weight: normal;
 }

 .firstaid-courses-para {
     font-family: Lato;
     font-weight: 300;
     width: 300px;
     margin: 0px;
 }

Answer 1

我认为你的问题是滚动条溢出

overflow: hidden // Wrapper

然后你应该可以浮动其他div

float: left // float both divs left

你不应该需要负面的顶级项目。

另一条路线是

display: inline-block;
vertical-align: top;

我会看看那些叠加它们的选项。希望有所帮助。

添加了一个codepen来显示没有float的内联块的极简主义用法。 http://codepen.io/sixthcore/pen/WbXdOd

Answer 2

快速解决您的问题是使用display: table

我已将您的代码更新为此处的工作演示 - http://jsbin.com/dazemenunu/1/edit?html,css,output

实现这一点

• 删除了position: relative;规则

替换为

• display: table在.wrapper
上 {li} display: table-cell位于.cpc-courses和.firstaid-courses类上

更好的整体解决方案是使用响应式布局。