如何让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。
答
同时设置内的div浮动到左侧,使用媒体查询指定根据屏幕上的不同宽度:
div.inner{
float: left;
width: 100%;
}
@media (min-width:768px){
div.inner{
width: 50%;
}
看一看here。
其实,这和引导网格系统一样 - 所以你应该尝试一下。
答
您可以使用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>
+0
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>
你可以尝试使用引导CSS的响应的事情。 – Adi