.row {display:table-row}
.row div {display:table-cell}
.row .one {width:200px}
.row .two {width:200px}
.row .three {}
上面说一下上边各个CSS属性的意义：
1.dispaly:table让.equal层作为块级元素的表格来显示，也就是将显示成表格的样子
2.border-collapse:separate边框独立，就像表格没有合并单元格以前
3.display:table-row将.row作为表格行tr显示
4.display:table-cell将.row的下级div作为表格单元格td显示
使用border-spacing:10px主要是来区分几个盒子，因为IE下不能正常显示，但是在：Mozilla、Opera、Firefox、Chrome下都是可以的。
只能通过JS脚本来弄，样式无法做到，想实现的话那就在再作div的嵌套，利用123嵌入一个div内，4再嵌入一个div内其实楼主的想法是完全没有意义的，怎么说呢，因为绝大部分页面我们只要求宽度自适应，就如楼主所提到的第一个横排换行，可以根据float:left样式属性来布局，页面窄了就换行，宽了下排的就补上去，从而达到页面的美观；还有就是用户使用浏览器的习惯，鼠标滚轮是可以让页面上下滚动的，虽然左右滚动也可以，但是需要按住滚轮来操作，这个大部分用户是不习惯使用的，有滚动都是通过拖动滚动条来浏览；当然为什么样式只有横向可以换行一时半会也说不清楚，原因有很多，其中人们的操作习惯很重要
楼主的第二个想法已经说明楼主已经在认真的学习了，对于这个问题的思考是值得表扬的，不过楼主不用再继续考虑这个问题了，你做页面只需要关注横向就行了
