Question

假设我有这样的结构。

<div class="container>
 <div class="left-col>
   some content

 </div>

 <div class="right column>
   <div class="login-form">Login Form</div>
 </div>

</div>

以上是我的网页结构，宽度为700px及以上..我想做的是每当浏览器宽度减少到480px及以下时.. div类登录表单将位于顶部，然后是它的下方是我的左手..有什么办法吗？我很乐意在不使用职位的情况下这样做：绝对

如果浏览器宽度为480px且结构低于此结构

<div class="container>

 <div class="right column>
   <div class="login-form">Login Form</div>
 </div>

 <div class="left-col>
   some content

 </div>



</div>

Answer 1

有一种方法可以做到这一点，它被称为响应式网页设计。您将使用媒体查询来告诉页面如何在特定大小下执行操作。

幸运的是，position属性的功能多于position:absolute;。在这种情况下，我会使用position:relative;并将“left-col”向下移动。

这是一篇很棒的文章，可以帮助您开始使用响应式网页设计。 CLICK HERE

Answer 2

您的HTML必须是这样的，还是可以交换它？这意味着html看起来不同，但你仍然在大屏幕右侧有登录表单。如果HTML是：

，则更简单

<div class="container">
  <div class="right-col">
    <div class="login-form">Login Form</div>
  </div>

  <div class="left-col">
    Some Content
  </div>
</div>

然后是CSS：

.left-col {
  background: green;
}

.right-col {
  background: red;
}

@media (min-width: 481px) {
  .container {
    overflow: hidden;
  }

  .left-col {
    overflow: hidden;
  }

  .right-col {
    float: right;
    margin-left: 10px;
  }
}

工作小提琴：http://jsfiddle.net/jhummel/4aNjd/

Answer 3

当浏览器为700px时，这些div是否左右显示？如果是的话......

在html中的“left-col”之前只需要“右列”div。在css中使用浮点数，因此“右列”显示在右侧，“left-col”仍然显示在左侧。我假设它们的宽度适合容器。然后，在您的媒体查询中，给出“右列”float：none和width：100％，这样当浏览器小于480px时，表格div将显示在顶部。

注意：我认为你的意思是“右栏”，而不是“右栏”。

<style>
.left-col{
float:left;
}

.right-column{
float:right;
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.left-col{float:none; width:100%;}
.right-column{float:none;}
}

</style>

<div class="container>

 <div class="right-column>
   <div class="login-form">Login Form</div>
 </div>

 <div class="left-col>
   some content

 </div>

</div>

在窗口处向上移动div调整大小而不使用绝对值

3 个答案: