让DIV响应

时间:2016-03-01 11:31:56

标签: css html5

我有一个有4个div的部分,它们居中。

我需要做下一个:

当屏幕宽度大于1280像素时,它会连续显示4个div, 当屏幕宽度小于1280px时,每行需要显示2个div 当屏幕宽度小于每行640px时。

HTML

<section class="gallery">
  <div class="flex flex--center">
    <div class="gallery-div">    
    </div>
    <div class="gallery-div">    
    </div>
    <div class="gallery-div">    
    </div>
    <div class="gallery-div">    
    </div>
  </div>
</section>

CSS

.flex{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex--center{
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.gallery-div{
    background-color:pink;
    width:300px;
    height300px;
    margin:10px 5px;}

@media (max-width: 640px) {
  .home-section .flex {
    display: block;
  }

3 个答案:

答案 0 :(得分:3)

使用Bootstrap是完全没必要的!

你可以用一些简单的CSS来做到这一点:

o
.gallery-div{
    background-color:pink;
    width: 100%;
    height:300px;
    float: left;
}
.gallery-div:nth-of-type(even) {
  background-color: cornflowerblue;
}
.clear {
  clear: both;  
}

@media (min-width: 640px) {
    .gallery-div{
      width: 50%;
    }
}
@media (min-width: 1280px) {
    .gallery-div{
      width: 25%;
    }
}

答案 1 :(得分:0)

使用bootstrap网格,您可以设置每个尺寸的col宽度。

Bootstrap网格系统有四个类:

  • xs - 超小(适用于手机)
  • sm - 小(适用于平板电脑)
  • md - 中(适用于桌面)
  • lg - 大(适用于较大的桌面)

http://getbootstrap.com/css/#grid

您可以添加多个类,例如:

<div class="col-xs-12 col-sm-6 col-md-3"></div>

答案 2 :(得分:-1)

您可以将此课程应用于 gallery-div

<div class="col-xs-12 col-sm-6 col-md-3"></div>

它会使你的行在xs(extrasmall)中显示1个图像,在sm(中)中显示2并在更大的屏幕上显示4; md(中型和大型/ lg)

希望它能澄清一点:)