100分，css的布局问题，有示例代码,请各位大神前来一观_html/css_WEB-ITnose

                    
                                查询项目                                    查询项目                                    查询项目                                    查询项目                                    查询项目                    
        
            查询        

1.红色的div和蓝色的div并列，当页面宽度变化的时候，红色的div的宽度固定，蓝色的div宽度自适应
2.绿色的div宽度固定，当宽度不够的时候，绿色的div能换行排列，这个时候，蓝色div的高度就发生了变化，要求红色div的高度也随之变化

现在的情况是，红色的div经常跑到蓝色下面去，而且，红色div的高度不会变化:如图:


下午发了一个帖子，当时大致实验了一下，发现没问题，就结贴了，晚上仔细看，还是有点问题的，所以再开一贴来问问

回复讨论(解决方案)

											
			
									查询项目													查询项目													查询项目													查询项目													查询项目							
			
				查询			
		
	

二楼正解，display布局方式
table：指定对象作为块元素级的表格。类同于html标签

inline-table：指定对象作为内联元素级的表格。类同于html标签
table-caption：指定对象作为表格标题。类同于html标签

http://css.doyoe.com/

											
			
									查询项目													查询项目													查询项目													查询项目													查询项目							
			
				查询			
		
	

二楼正解，display布局方式
table：指定对象作为块元素级的表格。类同于html标签

table-cell：指定对象作为表格单元格。类同于html标签

table-row：指定对象作为表格行。类同于html标签

inline-table：指定对象作为内联元素级的表格。类同于html标签
table-caption：指定对象作为表格标题。类同于html标签

http://css.doyoe.com/

谢谢！我试验了一下， 其他的要求都满足了，就是有一点，在拉动浏览器边框的时候，蓝色的div会自动换行，但是换行后，旁边会空出一大段空白，怎么把这段空白去掉？

你想怎么去掉？换成红色？换成白色？

                                            
            
                                    查询项目                                                    查询项目                                                    查询项目                                                    查询项目                                                    查询项目                            
            
                查询            
        
    

除了百分比还有一种用rem做的。。可以去看看。如果.qitem子级大小要固定的话，你可以根据实际情况，当子级换行时的大小，进行@media设置。。

你想怎么去掉？换成红色？换成白色？

不是换颜色，而是把这多余的一段去掉，自动换行后，会有这么一段多余的东西，这样看起来，查询按钮就和查询的项目隔的很远

你想怎么去掉？换成红色？换成白色？

不是换颜色，而是把这多余的一段去掉，自动换行后，会有这么一段多余的东西，这样看起来，查询按钮就和查询的项目隔的很远

我的意思就是问你怎么去啊，换颜色？红色部分变长？蓝色部分变短？你总该有个去掉的办法吧~

你想怎么去掉？换成红色？换成白色？

不是换颜色，而是把这多余的一段去掉，自动换行后，会有这么一段多余的东西，这样看起来，查询按钮就和查询的项目隔的很远

我的意思就是问你怎么去啊，换颜色？红色部分变长？蓝色部分变短？你总该有个去掉的办法吧~

蓝色部分变短

给你一个思路，用js或者是用响应式控制蓝色块的宽度，只要保证蓝色块的宽度始终是绿色宽度的整倍数就行。

给你一个思路，用js或者是用响应式控制蓝色块的宽度，只要保证蓝色块的宽度始终是绿色宽度的整倍数就行。

谢谢，这是个思路，我之前也写过代码来控制，但是现在碰到的问题是，蓝色div中的项目，可能会提前就自动换行了，我的代码还没来得及控制他换行，他就自己换行了。。。。现在正苦恼呢

table-cell：指定对象作为表格单元格。类同于html标签

table-row：指定对象作为表格行。类同于html标签