Question

当我将其缩小以进行移动视图时，我有两个相同高度的垂直div和一个水平div，它应该垂直堆叠，但到目前为止，它是水平堆叠的。同样在320像素视图中，底部的5张图像无法正确显示，因此我如何垂直堆叠它们

如何垂直堆叠所有div并将其放置在一行中？

.flex-container{
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}
.flex-container .column{
    padding: 10px;
    background: white;
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}
.flex-container .column.bg-alt{
    background: white;
}
.wrapper{
  width:100vw;
  /*border:1px solid red;*/
}

.adsense{
  /*border:1px solid black;*/
  width:80%;
  margin:0 auto;

}
 #footer { 
            position: fixed; 
            padding: 10px 10px 0px 10px; 
            bottom: 0; 
            width: 100%; 
            /* Height of the footer*/  
            height: 40px; 
            /*background: grey;*/ 
        }

    <div class="flex-container">
        <div class="column">       
            <h6>LOGO CATS KITTENS</h6>
        <span class="arrow">&#8592; All Kittens</span>
            <img src="Img/the-lucky-neko-WNoYQaAtCfo-unsplash.jpeg" style="width: 700px;height: 300px;border-radius: 3px;" /></div>
        <div class="column bg-alt">
           <br />
            <br /><br />
            <span class="arrow">&#8592; Previous / Next KITTEN &#8594;</span>
               <p>
                   SUBT <br />
                   Fantastic Bob <br />
                   <hr />
                   He is a Fantastic Kitten <br />
                   Fur Color
               </p>
               
                 <div style="display:flex;white-space:nowrap">Kitten Box Size&nbsp;
                     <div class="badge">i</div>&nbsp;32 34 36 38 40 42 44
                 </div>
        <div style="display:flex;white-space:nowrap;">Number Of Toys &nbsp;&nbsp;&nbsp; <div style="width:20px;height:25px;border:1px solid #000;text-align: center;vertical-align: middle;"> 1 </div> &nbsp;&nbsp;&nbsp; - &nbsp; + </div>
        <p>He was found wandering the streets stealing pizza.<br />
        4 other people interested in Bob!<br />
         > Care Details <br />
        > Assistance </p></div>
    </div>
    <div class="wrapper">
    <div class="adsense">
        <div style="position:absolute;padding-bottom: 1px;bottom:230px;float:left"><p>Recently Viewed Kittens</p></div>
         <div style="width: 20%;float:left; padding: 10px;padding-left:0px; ">
            <img src="Img/nihal-karkala--vcg9-w_yMk-unsplash.jpg" style="width: 200px; height: 200px; border-radius: 3px; border-radius: 3px;" />
        </div>
        <div style="width: 20%; float: left; padding: 10px;">
            <img src="Img/lingda-kong-DCqAn1JtmQg-unsplash.jpg" style="width: 200px; height: 200px; border-radius: 3px; border-radius: 3px; " />
        </div>
        <div style="width: 20%;float: left;padding: 10px;">
            <img src="Img/hang-niu-Tn8DLxwuDMA-unsplash.jpg" style="width: 200px; height: 200px; border-radius: 3px; border-radius: 3px;" />
        </div>
        <div style="width: 20%; float:left;padding: 10px;">
            <img src="Img/juan-carlos-cajahuaman-uk5td9GbVpk-unsplash.jpg" style="width: 200px; height: 200px; border-radius: 3px; border-radius: 3px;" />
        </div>
        <div style="width: 20%; float:right;padding: 10px;">
            <img src="Img/dhaya-eddine-bentaleb-xnyfMfMM6Fk-unsplash.jpg" style="width: 200px; height: 200px; border-radius: 3px; border-radius: 3px;" />
        </div>
    </div>
</div>
    <div id="footer"><h4 style="background-color:black;color:white;height:30px;">
            LOGO    CATS   KITTENS CONTACT HELPCENTER
        </h4>
                  </div>

Screenshot for reference

Answer 1

您可以利用媒体查询为移动设备设置自定义CSS代码，

使用 flexbox 时，可以使用其专有权之一：

flex-direction：列，它将根据需要使“ flex” div堆栈下的所有div彼此下方。

您甚至可以使用 align-items：Stretch （拉伸项目）来使两列具有相同的高度。

下面您可能会找到有关flex box及其特性的超赞链接，以获取有关该主题的更多信息！

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

这是代码结构的简单示例：

HTML：

.adsense {
  display: flex;
}

.adsense .item {
  padding: 10px;
  border: thin solid red;
  width: 200px; 
  height: 200px;    
  border-radius: 3px;    
  border-radius: 3px;
}

@media (max-width: 768px) {
  .adsense {
    flex-direction: column;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .adsense .item {
    margin: 0 auto;
  }
}

CSS：

Lorem ipsum dolor sit amet,10/30/2020,2340.234450,pet,999
consectetur adipiscing elit,10/30/2020,54.2,home,577

无法在移动视图或缩小的像素视图中垂直堆叠div

2 个答案: