CSS：盒子柔性展示
[英]CSS: Box flexible display
3 个解决方案
解决方案1
0 2020-03-21 05:00:11
Grid system - bootstrap 4
网格系统 - 引导程序 4
https://getbootstrap.com/docs/4.3/layout/grid/ 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
You should use Bootstrap's grid system here.您应该在这里使用 Bootstrap 的网格系统。 I have attached a sample code with just two divs.我附上了一个只有两个 div 的示例代码。 This is for your better understanding.这是为了你更好的理解。 Before you proceed to cards, first play around with the grid system and make yourself wise in it.在你开始玩纸牌之前，首先要玩转网格系统，让自己在其中变得聪明。 This is as simple as it looks.这看起来很简单。 A bootstrap row is divided by equal 12 columns.一个引导行除以相等的 12 列。 They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.它们可以使用-lg-大型设备、md-中型设备、sm-小型设备和xs-超小型设备来表示。
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view. col-lg-6 col-md-12 - 这意味着 DOM 元素在桌面视图中应占一行的 6 列，在平板电脑视图中应占 12 列。
Make sure you learn how media queries work, then proceed with bootstrap's grid system.确保您了解媒体查询的工作原理，然后继续使用引导程序的网格系统。 Hope it helps!.. Happy coding .!!希望它有帮助！..快乐编码.!!
<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
It would be pretty simple using css grid.使用 css grid 会非常简单。
Let's say you have 4 divs.假设您有 4 个 div。 Put those in a container.把它们放在一个容器里。 Set that container to:将该容器设置为：
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.这通常会设置 2 个自动缩放的列。 and then set a media query for your selected width of a tablet然后为您选择的平板电脑宽度设置媒体查询
@media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column.这意味着最多 500 像素，只有一列。 No one else used css grid so I thought it would be cool to show.没有其他人使用 css grid，所以我认为展示它会很酷。
I might have mixed up columns and rows cause I'm dumb but yea that's it.我可能混淆了列和行，因为我很笨，但就是这样。 I suggest you learn about media queries, and css grid/flexgrid/bootstrap我建议你学习媒体查询和 css grid/flexgrid/bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.