Question

所以我需要创建一个布局，如下面的两个截图所示在纵向模式下：4行，每行4个div，最后一行2个在横向模式下：2行，每行7个div。

使用以下css很容易制作4行和2行：

@media screen and (orientation:landscape) {
.cat_div{
  width:14.2vw; // for 7 items per row → 2 rows
}
@media screen and (orientation:portrait) {
.cat_div{
  width:25vw; // for 4 items per row → 4 rows
}

我的问题：我似乎无法解决这个棘手的问题！

不允许向下滚动！它需要适合任何窗口大小。所以div需要根据大小变得越来越大，因此用户永远不必向下滚动。

我现在玩了几个小时，但我似乎无法获得理想的结果。有人可以查看我的代码吗？

我的完整代码片段：

＆＃13;

.cat_icon {
  background-color:goldenrod;
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;

}
.cat_div{
  border:lightgrey solid thin;
  margin:0.5vw;
}
#cat_btn_container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
#cat_btn_container{
  height:80vh;
}

@media screen and (orientation:portrait) {
.cat_div{
  width:22.5vw;
height:50%;
}
}
@media screen and (orientation:landscape) {
  .cat_div{
width:12.5vw;
height:50%;
}
}

＆＃13;

<body>
  <div id="cat_btn_container">
  <div class="cat_div">
    <div class="cat_icon"></div>
    <label>Category 1</label>
  </div>
  
  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  <div class="cat_div">
    <div class="cat_icon"></div>
  </div>

  </div>
  </body>

＆＃13;

JS BIN上的相同片段：
http://jsbin.com/layaxi/edit?html,css,output

所需的结果：

Answer 1

带列的Bootstrap网格（每行需要添加12个）是完全响应的最佳方式。您也可以使用媒体查询，但是在许多屏幕尺寸的引导程序中都有类。

使一组div在屏幕上自动适应，而不会向下或向右溢出flexbox。（不滚动）

1 个答案:

使一组div在屏幕上自动适应，而不会向下或向右溢出flexbox。 （不滚动）

1 个答案:

使一组div在屏幕上自动适应，而不会向下或向右溢出flexbox。（不滚动）