css 如何在减少屏幕尺寸的同时使2个div相互重叠

fgw7neuy  于 2023-10-21  发布在  其他
关注(0)|答案(2)|浏览(161)

如何将两个

  1. .container{
  2. border: 2px solid black;
  3. display: flex;
  4. flex-wrap: wrap;
  5. }
  6. .container-part{
  7. width: 50%;
  8. }
  1. <div class="container">
  2. <div class="container-part">
  3. 1
  4. </div>
  5. <div class="container-par">
  6. 2
  7. </div>
  8. </div>

div在另一个下面,属性显示在缩小尺寸时灵活。

jgzswidk

jgzswidk1#

你需要min-width属性到container-part,这样当它溢出时,它会 Package div。
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
flex-wrap:wrap所做的是,当div的总宽度超过视口的宽度时,它会将div Package 到另一行。
如果你没看到这里面的错字

at0kjp5o

at0kjp5o2#

试试这个:

  1. * I added media Query of max-width: 600px and added flex-direction: column;`
  2. * so when your screen size goes below 600px then div will show in column
  1. .container{
  2. border: 2px solid black;
  3. display: flex;
  4. flex-wrap: wrap;
  5. }
  6. .container-part{
  7. width: 50%;
  8. }
  9. @media only screen and (max-width: 600px) {
  10. .container{
  11. flex-direction: column;
  12. }
  13. }
  1. <div class="container">
  2. <div class="container-part">
  3. 1
  4. </div>
  5. <div class="container-par">
  6. 2
  7. </div>
  8. </div>
展开查看全部

相关问题