CSS：盒子柔性展示
[英]CSS: Box flexible display
3 個解決方案
解決方案1
0 2020-03-21 05:00:11
網格系統 - 引導程序 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-12"> <div class="media border border-secoundery m-2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="..."> <div class="media-body"> <h5 class="mt-2">test title 1</h5> content test </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="media border border-secoundery m-2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="..."> <div class="media-body"> <h5 class="mt-2">test title 1</h5> content test </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="media border border-secoundery m-2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="..."> <div class="media-body"> <h5 class="mt-2">test title 1</h5> content test </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="media border border-secoundery m-2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="..."> <div class="media-body"> <h5 class="mt-2">test title 1</h5> content test </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
解決方案2
0 已采納 2020-03-21 05:13:11
您應該在這里使用 Bootstrap 的網格系統。 我附上了一個只有兩個 div 的示例代碼。 這是為了你更好的理解。 在你開始玩紙牌之前，首先要玩轉網格系統，讓自己在其中變得聰明。 這看起來很簡單。 一個引導行除以相等的 12 列。 它們可以使用-lg-大型設備、md-中型設備、sm-小型設備和xs-超小型設備來表示。
col-lg-6 col-md-12 - 這意味着 DOM 元素在桌面視圖中應占一行的 6 列，在平板電腦視圖中應占 12 列。
確保您了解媒體查詢的工作原理，然后繼續使用引導程序的網格系統。 希望它有幫助！..快樂編碼.!!
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> #div1{ background: #0ef; } #div2{ background: #fe0; } </style> </head> <body> <div class="jumbotron"> <div class="row"> <div class="col-lg-6 col-md-12" id="div1">div 1</div> <div class="col-lg-6 col-md-12" id="div2">div 2</div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
解決方案3
0 2020-03-21 07:27:12
使用 css grid 會非常簡單。
假設您有 4 個 div。 把它們放在一個容器里。 將該容器設置為：
container {
display: grid;
grid-template-columns: auto auto;
}
這通常會設置 2 個自動縮放的列。 然后為您選擇的平板電腦寬度設置媒體查詢
@media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
這意味着最多 500 像素，只有一列。 沒有其他人使用 css grid，所以我認為展示它會很酷。
我可能混淆了列和行，因為我很笨，但就是這樣。 我建議你學習媒體查詢和 css grid/flexgrid/bootstrap
CSS3柔性盒模型-盒應根據可用空間更改位置
[英]CSS3 Flexible Box Model - Boxes Should change location based on space available
使用Flexible Box Layout創建通用HTML5 / CSS3網頁
[英]Create a generic HTML5/CSS3 webpage using Flexible Box Layout
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.