柔性盒堆叠

Question

我在一个网站上工作，我在其中创建了用于设计的列布局。
我想要在大屏幕上有三列的响应式列布局，然后是两栏和较小的屏幕单栏。
我尝试了 flex-wrap，也尝试了 flex-direction 和 width ratio，但发现 none 有用!!!!!

谁能帮我解决这个问题？

* {
  box-sizing: border-box;
}

body {
    background: linear-gradient(-45deg, #e5e5dc, #D4DCF0, #D8D4F0, #DAD4F0);
    background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
} 


/** HEADER **/
#header-nav {
  background-color: #4d5198;
  border-radius: 0;
  border: 0;
}

.navbar-brand {
  padding-top: 25px;
}

.navbar-brand h1 { 
  font-family: 'Lora', serif;
  padding: 10px;
  color: #fff;
  font-size: 2.5em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #222;
  margin-top: 0;
  margin-bottom: 0;
  line-height: .75;
}

.navbar-brand a:hover, .navbar-brand a:focus {
  text-decoration: none;
}

#nav-list {
  margin-top: 10px;
}

#nav-list a {
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  margin-top: 10px;
}

#nav-list a:hover {
  background: #E7E7E7;
  color: #222;
}

#nav-list a i {
  font-size: 1.5em;
  padding-bottom: 5px;
}

.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
  border: 1px solid#fff;
}

.navbar-header button.navbar-toggle {
  clear: both;
  margin-top: -30px;
}
/* END HEADER */








/***div class info ***/

.diskinfo {
  display: grid;
}

.diskinfo p.hd {
  color: #2E4053;
  padding: 10px;
  margin-left: 30px;
  font-size: 3em;
  text-shadow: 1px 1px #4d5198;
}

#diskimg {
  height: 20%;
  width: 30%;
  margin-left: 30px;
  float: left;
  padding: 0 30px 30px 0;
}

#diskimg2 {
  height: 30%;
  width: 40%;
  margin-left: 30px;
  float: right;
  padding: 0 0 30px 30px;
}

#intro, #terms, #hd2, #why{
  font-size: 22px;
  text-align: justify;
  color: #546C85;
}

#intro {
  margin-right: 30px;
  margin: 10px;
  padding: 15px;
}

#terms {
  font-size: 20px;
  margin: 10px;
  padding: 15px;
  margin-left: 50px;
}

#bold {
  font-size: 21px;
}

#why {
  padding: 20px;
  margin-left: 50px;
}

.cont{
  display : inline-flexbox;
  width: 100%;
  text-align: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.row{
  display : flex;
  padding: 25px;
  
}
.col-sm{
  margin: 1.5%;
  box-shadow: 2px 2px 2px 2px  rgb(100, 103, 139);
  text-align: center;
  padding:2%;
  width: 50%;
  color:rgba(14, 14, 100, 0.966);
  background-color: #fff;
  flex-wrap: wrap;
  flex-direction: column;
}

.description{
  color: rgba(14, 14, 100, 0.966);
  font-size: large;
  text-align: justify;
}







/* MEDIA QUERIES */

/********** Large devices only **********/
@media (min-width: 1200px) {
  .col-sm{
    width: 33%;
  }
  
  
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  #intro, #hd2, #why {
    font-size: 20px;
  }

  #terms {
    font-size: 18px;
  }

  #bold {
    font-size: 19px;
  }
  .col-sm{
    width: 50%;
  }

}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-brand h1 { 
    padding-top: 10px;
    font-size: 4.5vw; 
  }

  .diskinfo p.hd {
    font-size: 2.5em;
  }

  #diskimg {
    height: 25%;
    width: 35%;
  }

  #diskimg2 {
    height: 35%;
    width: 45%;
  }

  #intro, #hd2, #why {
    font-size: 18px;
  }

  #terms {
    font-size: 16px;
  }

  #bold {
    font-size: 17px;
  }

}


/********** Extra small devices only **********/
@media (max-width: 767px) {
  /* Header */
  .navbar-brand {
    padding-top: 10px;
    height: 80px;
  }
  .navbar-brand h1 { 
    padding-top: 10px;
    font-size: 5vw; /* 1vw = 1% of viewport width */
  }

  #collapsable-nav a { /* Collapsed nav menu text */
    font-size: 1.2em;
  }
  #collapsable-nav a i { /* Collapsed nav menu glyph */
    font-size: 1em;
    margin-right: 5px;
  }

  .diskinfo p.hd {
    font-size: 2em;
  }

  #diskimg {
    height: 35% ;
    width: 45%;
  }

  #diskimg2 {
    height: 45% ;
    width: 55%;
  }

  #intro, #hd2, #why {
    font-size: 15px;
  }

  #terms {
    font-size: 13px;;
  }

  #bold {
    font-size: 14px;
  }

}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">

    <title>Disk Scheduling Algorithms</title>
    
    <!--CSS and Script linking-->
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
  </head>

  <body>
        <div class="cont">
        <div class="row">
          <div class="col-sm">
            <h2>First Come First Serve (FCFS)</h2>
            <p class="description">FCFS is the simplest disk scheduling algorithm. As the name suggests, this algorithm entertains requests in the order they arrive in the disk queue. The algorithm looks very fair and there is no starvation (all requests are serviced sequentially) but generally, it does not provide the fastest service.</p>
          </div>
          <div class="col-sm">
            <h2>Shortest Seek Time First (SSTF)</h2> 
            <p class="description">Shortest seek time first (SSTF) algorithm selects the disk I/O request which requires the least disk arm movement from its current position regardless of the direction. It reduces the total seek time as compared to FCFS. It allows the head to move to the closest track in the service queue.</p>
          </div>
          <div class="col-sm">
            <h2>SCAN<br><br></h2>
            <p class="description">In SCAN disk scheduling algorithm, head starts from one end of the disk and moves towards the other end, servicing requests in between one by one and reach the other end. Then the direction of the head is reversed and the process continues as head continuously scan back and forth to access the disk.</p>
          </div>
        </div>
        <div class="row">
            <div class="col-sm">
              <h2>Circular SCAN (C-SCAN)<br><br></h2>
              <p class="description">Circular SCAN (C-SCAN) scheduling algorithm is a modified version of SCAN disk scheduling algorithm that deals with the inefficiency of SCAN algorithm by servicing the requests more uniformly. Like SCAN (Elevator Algorithm) C-SCAN moves the head from one end servicing all the requests to the other end.</p>
            </div>
            <div class="col-sm">
              <h2>LOOK<br><br></h2>
              <p class="description">The LOOK algorithm services request similarly as SCAN algorithm meanwhile it also “looks” ahead as if there are more tracks that are needed to be serviced in the same direction. If there are no pending requests in the moving direction the head reverses the direction and start servicing requests in the opposite direction. </p>
            </div>
            <div class="col-sm">
              <h2>Circular LOOK<br><br></h2>
              <p class="description">In this algorithm, the head services requests only in one direction until all the requests in this direction are not serviced and then jumps back to the farthest request on the other direction and service the remaining requests which gives a better uniform servicing as well as avoids wasting seek time for going till the end of the disk.</p>
            </div>
          </div>
      </div>
      


    </div>


    
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="myscript.js"></script>

  </body>

</html>

Answer 1

您在使用 bootstrap 吗？我在您的 HTML 中看到您正在链接到 bootstrap 样式表。

如果您使用的是 bootstrap，则您没有在 div 列中使用正确的类。

你应该这样做：

    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-4">
        <!-- content here -->
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
        <!-- content here -->
      </div>
      <div class="col-sm-12 col-md-6 col-lg-4">
        <!-- content here -->
      </div>
    </div>

Answer 2

可能最简单的方法是使用网格。如果你只有一行东西，并且你想垂直或水平地控制它（并自动换行到新行），那么 Flex boxes 会很好用，但是一旦你想控制两个维度，网格就更容易使用。

使用网格，您只需更改不同媒体查询中的 grid-template-columns 值即可获得不同数量的列。这是一个简单的例子：

.container {
  max-width: 600px;
  color: white;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.container div {
  padding: 10px;
  background-color: green;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (min-width: 992px) {
  .container {
    grid-template-columns: repeat(3, 1fr)
  }
}

  <div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
  </div>

1fr表示可用宽度的一小部分。因此，repeat(3, 1fr) 等同于 1fr 1fr 1fr，它将可用宽度分成三个相等的分数。 gap 值设置垂直和水平间距。

设置网格显示真正需要的只是一个容器，上面设置了 display: grid，一个 grid-template-columns 值（如果您想要除默认值 [=13= 之外的任何值） ])，容器中的一组项目，以及网格应用于容器的 immediate 子级的 all 的理解以及任何更深层次的内容被忽略。您可以使用网格做更多的事情，但这是基本的想法。

柔性盒堆叠

Flex box stacking

html

css

layout

flexbox

responsive