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

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并使用flex-direction: column; 在你的row上。

 .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 的堆栈。 此外，放回 IE 上行/桌面视图的margin ，但一旦 div 的堆栈就删除了边距。

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