Question

我正在使用bootstrap，所以在笔记本电脑和桌面div中工作得很好，如：

但在Ipad或手机中，它变得像：

HTML code：

  <div class="thumbnail_container">
  <div class="col-sm-3">
      <div class="thumbnail">
          <div class="caption">
           <h3>First Div Test</h3>
              <p>

              </p>
          </div>
      </div>
    </div>
     <div class="col-sm-3">
      <div class="thumbnail">
          <div class="caption">
           <h3>Second Div Test</h3>
              <p>

              </p>
          </div>
      </div>
    </div>
</div>

这是管理div显示的CSS代码：

    .thumbnail_container .thumbnail
   {
     border-color: white;   
       color: black;
       width: 100%;
       padding-right: 0px;
       padding-left: 0px;
       padding-top: 0px;
       border-color: lightseagreen;

   }


   .thumbnail_container
   {
       text-align: center;
       margin-top: 30px;
   }


    .thumbnail span  
   {
      left:0; right:0;
       margin: auto;
   }

   .caption > p
   {
       color: black;
       width: 100%;
       margin-top: 0px;
       text-align: justify;

   }

如何在任何屏幕分辨率下使所有div高度相同？

Answer 1

将class="thumbnail_container"更改为class="thumbnail_container equal" 然后复制以下代码并粘贴它

   /*make thumbnail div height equal */
   @media screen and (min-width: 768px) 
   {
     .equal, .equal > div[class*='col-'] 
     {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 1 auto;
       }
      }

working fiddle

Answer 2

只需将display: flex;提交给.thumbnail_container，将height: 100%;提交给.thumbnail，就可以达到相同的高度。

<强> Working Fiddle

小分辨率的Div高度不一样

2 个答案: