如何在响应式中堆叠弹性框

Question

我仍在学习 CSS、html 和响应式设计的概念。有人可以帮我将这些框堆叠为响应行而不是列。请看下面的代码。

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>Test Example</p>

      <ul>
        <li>test1</li>

        <li>test2</li>

        <li>test3</li>

        <li>test4</li>
      </ul>

      <p>Minor updates.</p>

      <ul>
        <li>test</li>

        <li>Test</li>
      </ul>

      <p><a href=".html" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>test123/p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>

        <p><a href="" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>

Answer 1

删除col1 上的margin 并在您的row 上使用flex-direction: column;。

.row {
  display: flex;
  flex-direction: row;
  /* equal height of the children */
}

@media only screen and (max-width: 600px) {
  .row {  
    flex-direction: column;
  }
  .col1 {
    margin: 0px !important;
  }
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}


.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>Test Example</p>

      <ul>
        <li>test1</li>

        <li>test2</li>

        <li>test3</li>

        <li>test4</li>
      </ul>

      <p>Minor updates.</p>

      <ul>
        <li>test</li>

        <li>Test</li>
      </ul>

      <p><a href=".html" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>test123</p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>

        <p><a href="" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>

编辑~flex-direction: row; 和gap 的图像。类似于您最初设置的边距。

编辑 ~ 添加media-query 以在调整大小时拥有 div 的堆栈。此外，将margin 放回 IE 上的行/桌面视图，但在 div 堆栈后删除边距。

@media only screen and (max-width: 600px) {
  .row {  
    flex-direction: column;
  }
  .col1 {
    margin: 0px !important;
  }
}