html - 将网页推到一边的元素？

Question

我有两个彼此相邻的 div 并且正在使页面变大并且能够滚动到一边？有人可以帮忙吗？我试过 float 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

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

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

为了实现这一点我

• 删除了 position: relative; 规则

并替换为

• display: table 在 .wrapper 上
• display: table-cell 在 .cpc-courses 和 .firstaid-courses 类上

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