Question

我们已经尝试过我们可以找到的每个响应式2列分区，但它们无法正常工作。我在下面列出了一些我们尝试过的链接。知道他们为什么不工作吗？我们只想在屏幕变小时堆叠的div。提前谢谢！

<div class="group">
<div class="left">
    <p>tates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
</div>
  <div class="right">
    <img src="http://lorempixel.com/640/480/" alt="" />
  </div>
 </div>

<style>
.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
img {
    max-width: 100%;
    height: auto;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
@media screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: auto;
    }
  } </style>

此外： http://jsfiddle.net/8YLXy/

Answer 1

试一试：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
img {
    max-width: 100%;
    height: auto;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
@media screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: auto;
    }
            }
        </style>
    </head>
    <body> 
        <div class="group">
            <div class="left">
                <p>tates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
            </div>
              <div class="right">
                <img src="http://lorempixel.com/640/480/" alt="" />
              </div>
        </div>
    </body>
</html>

Answer 2

你的第一个小提琴工作得很好，你的第二个需要调整，这个

Updated fiddle

在这里，我浮动侧边栏，而不是绝对定位，并在标记中切换孩子（float: right需要先行）

.container {
  position: relative;
}
.sidebar {
  float: right;
  width: 250px;
}
.main-area {
  background: red;
  margin-right: 250px;
}

@media screen and (max-width: 480px) {
  .sidebar {
    float: none;
    width: auto;
  }
  .main-area {
    margin-right: 0;
  }  
}

<div class="container">
    <div class="sidebar">sidebar</div>
    <div class="main-area">main content</div>
</div>

响应2列Div不工作

2 个答案: