Question

这对我来说非常困难。

我有一个主要专为手机设计的网页，可以正常使用。问题出在更大的设备上。

所以我有一个新闻故事数据库，首先是拉开前20个故事（按最新排序）。

在显示正常的手机上：

故事1 故事2 故事3 故事4

等。在大屏幕上显示故事：

故事1故事4故事7故事10

故事2故事5故事8故事11

故事3故事6故事9故事12

第一页上的内容很好，但随着页面变得越来越长，当新闻故事中无限滚动时，所有内容都向下移动，因为该列是最新的故事。用户有效地看到第一页上的故事。

就像我说的，在移动设备上，它运行正常，因为它只显示一列。只是想知道是否有人有任何聪明的想法？ pinterest类型设计仅限css：

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em; 

}

.news-item {
display: inline-block;
margin:  0.2rem;
padding:  0.2rem;
width:  100%; 
}

Answer 1

我处理了你的问题。请试试这个。

*, *:before, *:after {box-sizing:  border-box;}
.parent{ width:100%; float:left; display:table; background:#232323; padding:10px;}
.parent .sub-row{ display:table-cell;}
.parent .sub-row .story{ width:100%; height:100px; margin:1px; background:#04CBEC; border:1px solid #000;}



@media only screen and (max-width:1024px) {
	
}


@media only screen and (max-width:767px) {
.parent{ width:100%; float:left; display:block;}
.parent .sub-row{ display:inline;}
.parent .sub-row .story{ width:24.5%; float:left;}
}

<div class="parent">
	<div class="sub-row">
    	<div class="story">1</div>
        <div class="story">2</div>
        <div class="story">3</div>
    </div>
    <div class="sub-row">
    	<div class="story">4</div>
        <div class="story">5</div>
        <div class="story">6</div>
    </div>
    <div class="sub-row">
    	<div class="story">7</div>
        <div class="story">8</div>
        <div class="story">9</div>
    </div>
    <div class="sub-row">
    	<div class="story">10</div>
        <div class="story">11</div>
        <div class="story">12</div>
    </div>
</div>

按日期无限滚动排序

1 个答案: