使DIV响应

我有一个部分有4个div，它们是居中的。使DIV响应

我需要做下一个：

当屏幕宽度大于1280px它显示4个格的一排大，当屏幕宽度大于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; 
    }

来源

2016-03-01 Timur

为什么不使用引导程序？ –

这是一个大学项目，所以我需要建立自己的网格 – Timur

Bootstrap对于这些微不足道的东西完全没有必要。 –

使用引导因为这是完全没有必要的！

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

.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%; 
 
    } 
 
}

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

来源

2016-03-01 11:45:59

@Timur您可能想了解使用“box-sizing：border-box;”的好处，以使用基于％的宽度的网格。 – Ben

使用引导电网，可以设置每个尺寸一个山坳宽度。

的引导电网系统有四种类型：

XS - 特小（手机）
SM - 小（片）
MD - 媒介（桌面）
lg - Large（适用于较大桌面）

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

您可以添加多个类，以便例如：

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

来源

2016-03-01 11:36:36

-1

你可以把这个类的画廊-DIV

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

它将使你的行显示1个图像XS（ extrasmall），在sm（中）显示2，并在更大的屏幕上显示4; MD（中型和大型/ LG）

希望这阐明这一点:)

来源

2016-03-01 11:42:17

回答

相关问题