<div class="wrapper"> <div>column 1</div> <div>column 2</div> <span class="tr"></span> <div>column 3</div> <div>column 4</div> </div> 

在大屏和小屏时，tr是不显示的，而在中屏时，tr显示：

.tr{ 

    display: none; 

} 

 

@media (max-width: 1024px) and (min-width: 501px){ 

    .tr{ 

        display: table-row; 

    } 

} 

就能够实现在小屏时一行排两列了，只是这个有个小问题，就是在中屏拉到大屏的时候tr的dipslay: none已经没有什么作用，因为table的布局已经计算好。但是一般应该不用考虑这种拉伸范围很大的情况，正常刷新页面是可以的，如果真要解决那得借助下js

5.需要根据个数显示不同样式

例如说可能有1~3个item显示在同一行，而item的个数不一定，如果1个，那这个item占宽100%，2个时每一个50%，3个时每一个33%，这个你也可以用js计算一下，但是用CSS3就可以解决这个问题：

<style> 

    li{ 

        width: 100%; 

    }   

    li:first-child:nth-last-child(2), 

    li:first-child:nth-last-child(2) ~ li{ 

        width: 50%; 

    }   

 

    li:first-child:nth-last-child(3), 

    li:first-child:nth-last-child(3) ~ li{ 

        width: 33%; 

    }   

</style> 

<ul> 

    <li>1</li> 

    <li>2</li> 

    <li>3</li> 

</ul> 

第5行的意思就是选择li的第一个元素，并且它是倒数第二个元素，第6行的意思是选择前面有是第一个且是倒数第二个li的所有li，第一行是选择了第一个，第二行选择除第一个外的其它所有元素。有三个元素的类似。

6. 使用表单提交

提交请求有两种方式，一种是ajax，另外一种是表单提交。很多人都知道ajax，但往往忽略了还有个form提交。

假设在首页有一个搜索的表单，点击search的时候就跳到列表页

你可以一个个去获取所有的input的值，然后把它拼到网址参数重定向一下，但是其实可以不用这样，用一个表单提交就好了：

(责任编辑：admin)