如何讓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響應並垂直堆疊它們？

回答

相關問題