Question

我想让2 div响应，所以当使用移动设备时，2个内部div将垂直堆叠，一个在另一个之上。

我有div s的HTML（没有响应），但我不知道我需要做些什么来使CSS响应：

<div style="width: 100%; overflow: hidden;">
    <div style="width: 50%; float: left;"> Left </div>
    <div style="margin-left: 50%;"> Right </div>
</div>

我有一个JSfiddle here。

Answer 1

您可以使用flexbox：

#wrapper {
  display: flex;    /* Magic begins */
  flex-wrap: wrap;  /* Allow multiple lines */
}
#wrapper > div {
  flex: 1;          /* Distribute space equally among the flex items */
  min-width: 300px; /* But force them to be at least300px wide */
  border: 1px solid;
}

<div id="wrapper">
  <div>Left</div>
  <div>Right</div>
</div>

Answer 2

将两个内部div分别向左浮动，并根据屏幕使用媒体查询指定不同的宽度：

div.inner{
    float: left;
    width: 100%;
}

@media (min-width:768px){
    div.inner{
        width: 50%;
}

看看here。

实际上，这与引导网格系统的作用相同 - 所以你应该尝试一下。

Answer 3

以下是响应性的代码段。您需要使用媒体查询为不同宽度的设备应用不同的CSS。所以，我为孩子2 divs应用不同的CSS，宽度小于768px的设备。如果您调整浏览器大小或在移动设备上查看页面，您会看到这两个div是垂直堆叠的。

*{
    box-sizing: border-box;
}

.container{
    position:relative;
}

.container:after{
    clear: both;
    content: "";
    display:block;
}

.col-half{
    position:relative;
    float:left;
    width: 50%;
    padding: 15px;
    background-color:lightblue;
}

@media only screen  and (max-width: 767px){
    .col-half{
        float:none;
        width:100%;
    }
}

<div class="container">
    <div class="col-half"> Left </div>
    <div class="col-half"> Right </div>
</div>

如何使div响应并垂直堆叠？

3 个答案: