html 四个div并排,html – 4个并排的DIV在小屏幕上没有对齐为3个并排的DIV

好吧,我会尽量让它变得清晰.

当页面为全宽时,我有4个DIV彼此相邻.在下面还有另外4个DIV的大小相同,所有这些都是这样的：

| | | |

| | | |

当屏幕变小时,右侧的DIV应该下降,这样就会有3个DIV彼此相邻,并且3 DIV紧挨着它们,如下所示：

| | |

| | |

现在由于某种原因,这将无法正常工作,DIV确实会失效,但站在屏幕的右侧,如下所示：

| | |

|

| | |

|

在使用的代码下面：

Vacature medewerker webshop

and St. Maarten. 

LEARN MORE

Bay West Racingteam in action at the ESSF 2014

and St. Maarten. 

LEARN MORE

Vacature medewerker debiteurenbeheer

and St. Maarten. 

LEARN MORE

Vacature medewerker webshop

and St. Maarten. 

LEARN MORE

不要介意“ID”,它们现在不用.在使用的CSS下面：

.highlights .highlight {

float: left;

text-align: center;}

.i2three-highlights-news {margin: auto; width:90%; background-color:white;}

.i2three-highlights-news .highlight {width: 300px; margin-left: 10px;}

.i2three-highlights-news .highlight:first-child {margin-left: 0;}

.i2three-highlights-news .highlight .el-inner {padding: 0 10px 0 0; }

.i2three-highlights-news .highlight .title, .i2three-highlights-news .highlight .title a {font-family:"Open Sans Light" 'Vollkorn', sans-serif; color: #174f6e; font-size: 24px; line-height: 1; font-weight: bold; height: 63px; margin-bottom: 20px;}

.i2three-highlights-news .highlight .title:after {width: 20px; height: 1px; display: block; content: ""; position: absolute; bottom: 0; left: 0;}

.i2three-highlights-news .highlight .text a {font-size: 15px; line-height: 21px; margin: 0 0 20px; color: #3e4856}

.highlights .highlight .image-news{width:auto; height:auto; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #d1e6f7}

.hightlights .hightlight .extra-images-product{width:50px; height:50px; background-color:red;}

.extra-img{float:left; margin-left:13%;margin-top:5%;margin-bottom:5%;}

.desc-news {width:300px; height:auto; margin:auto; margin-bottom:10%;}

.highlights-news{ color: #00376D;display:block; width:100%; margin-bottom:2%;}

.learn-more-news{text-decoration:underline;}

我希望这会使问题清楚,任何帮助将不胜感激！