如何让div响应并垂直堆叠它们？

我想使2 div灵敏的反应，所以当使用移动设备，所述2个内部div旨意垂直于另一个的顶部堆叠，一个。如何让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。

来源

2015-10-04 maccas28

你可以尝试使用引导CSS的响应的事情。 – Adi

同时设置内的div浮动到左侧，使用媒体查询指定根据屏幕上的不同宽度：

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

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

看一看here。

其实，这和引导网格系统一样 - 所以你应该尝试一下。

来源

2015-10-04 20:31:22 chem1st

谢谢@ chem1st。你描述的正是我想要的。但是，当我将代码应用到我的网站时，它不会像您的代码那样工作。什么都没发生。我也尝试使用Bootstrap代码，同样的事情没有任何反应。为什么不被应用？ – maccas28

你有没有试过在浏览器中检查你的代码？ css文件是否正确加载？ – chem1st

明白了，其中一个div并未包含在.container-fluid div中。现在工作。感谢提示，Bootstrap非常有用。 – maccas28

您可以使用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>

来源

2015-10-04 20:17:53 Oriol

flex-wrap适合我......感谢您的提示。 – Nabil

下面是响应的代码片段。您需要使用媒体查询为不同的宽度设备应用不同的CSS。所以，我为不到768px宽度的设备应用不同的CSS为子2 div。如果您调整浏览器大小或在手机上查看页面，您会看到这两个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>

来源

2015-10-04 20:22:42

如何让div响应并垂直堆叠它们？

回答

相关问题