我是否正确使用绝对和相对位置？

Question

http://codepen.io/DoucetteDeveloper/pen/yJzEvB

.information {
  position: relative;
}
.text {
  position: absolute;
  left: 0;
  padding: 10px 30px 40px 80px;
  width: 50%;
  background-color: lightblue;
}
ul li {
  font-size: 31px;
}
ul {
  list-style: none;
}
.contact_info {
  position: absolute;
  padding: 0 1em;
  font-size: 2em;
  right: 310px;
  background-color: lightpink;
}
h1 {
  font-size: 36px;
  line-height: 145%;
  font-weight: 200;
}

<div class="information">
  <div class="text">
    <h1> Lorem Ipsum adalah text contoh digunakan didalam industri pencetakan dan typesetting. Lorem Ipsum telah menjadi text contoh semenjak tahun ke 1500an, apabila pencetak yang kurang terkenal mengambil sebuah galeri cetak dan merobakanya menjadi satu buku spesimen. Ia telah bertahan bukan hanya selama lima kurun, tetapi telah melonjak ke era </h1> 
  </div>
  <div class="contact_info">
    <ul>
      <li>Zoe D</li>
      <li>(1)222-222-2222</li>
      <li>Somethingsomething@gmail.com</li>
    </ul>
  </div>
</div>

我希望粉红色的盒子位于蓝色框旁边。 我把position: relative;放在装有两个方框的容器上，并在两个方框上放position: absolute;。我从左侧偏移蓝色方框0，并从右侧偏移粉红色方框310.

有更好的方法吗？我应该将容器浮动在容器div中吗？

另外，如果你能回答这个问题，我想在大屏幕上看到蓝色框旁边的粉红色框，但我希望当浏览器最小化时，粉红色框会落在蓝框下面。

现在最小化的时候会发生什么，粉红色的盒子覆盖蓝色的盒子（更高的Z指数，因为它是绝对的），蓝色的盒子变得小于全宽（我希望它在小屏幕上是全尺寸的。）如果你知道任何关于如何制作响应式设计的好初学者教程，我之前已经查询了媒体查询，但我仍然对此感到困惑。

Answer 1

使用CSS Float属性：

您正在寻找CSS float 属性而不是绝对定位您的div，为两个div设置float:left允许它们水平对齐。

使用@media查询进行响应式设计

使用CSS媒体查询，您可以控制何时使用指定的条件激活启用/禁用CSS浮动属性，这里我们可以使用min-width:600px作为条件，每当屏幕宽度大于600px时，div将被漂浮在一起，否则，第二个div将被推下并且浮动将变得无效。

你的最终CSS应如下所示：

/* Activate float property to divs whenever screen width is > 600px */
@media (min-width: 600px) {
  .contact_info, .text {
    float: left;        
  }
  .text { width:50%; }
}

/* remove your absolute positioning values */
.information {

}
.text{
  padding: 10px 30px 40px 80px;
  // width:50%; <-- removed from here
  background-color:lightblue;
}
ul li{
  font-size:31px;
}
ul {
 list-style: none;
}

.contact_info{  
    padding: 0 1em;
    font-size:2em;
    background-color:lightpink;
}

h1{
    font-size: 36px;
    line-height: 145%;
    font-weight: 200;
}