今天用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页面元素的位置。