CSS排版浮动小技巧

       今天用CSS排版的时候，遇到一个小问题。打开博客之后又不想写了，很简单的问题，没什么好写的呀。之后还是下决心继续写吧。一个思维方式的问题。

       干说的话问题描述不清楚。下看这张图片吧：

                 

       我想实现的效果是让3与1对齐，但是浮动之后，显现的结果3却与2对齐。如果html代码不变，你调整CSS代码的话，半天你也调不好。我下午最少花了一个半小时调这个。恶心吐了都。。。。什么问题都能卡半天。。

       这里给出DEMO的HTML和CSS的代码：

       HTML：

<table>
    <tr id="One">
        <td>
            <div class="show">1</div>
        </td>
    </tr>
    <tr id="Two">
        <td>
            <div class="show">2</div>
        </td>           
    </tr>
    <tr id="Three">
        <td>
            <div class="show">3</div>
        </td>
    </tr>
</table>

       CSS：

#One
{

}
#Two
{    
    float:left; 
}
#Three
{   
    float:right;
}
.show
{
    width:300px;      
    border-style:solid;
}

       出去了一趟回来才意识到，将3和2的html代码换一下不久ok了嘛？。。。不用时试知道了，肯定行。

       当让，我做的系统的排版当然没有这么简单了，而问题越复杂就越会蒙蔽你的双眼，让你看不清事实。总结一下这个小例子，应该叫做逆向思维问题吧。平时一遇到这种问题，总是希冀于通过CSS来控制页面的版式，而这里是改变html页面元素的位置。