关于HTML/CSS Tab的一些问题

unnamedx

麻烦各位大大帮帮忙下,也许是个很蠢的问题，但是我就是钻不出那牛角尖,所以来这里问问看

我想不用table来制造以下的效果


可是当我尝试把img变成float:left时,却变成


初步猜想是和border的clear:both crash到了,但是想了几天还是不得其解,想问下我到底该怎么解决呢？
以下是我的code

<div class="mainMiddle">
<div class="tabArea">
<div class="tabHeader">
<ul>
<li id="tabSelected"><a href="#">Featured</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Event</a></li>
</ul>
</div>
<div class="tabContent">
<a href="#"><img src="image/default.gif"/></a>
<a href="#">default</a>
<a href="#"><img src="image/default.gif"/></a>
<a href="#">default</a>
<a href="#"><img src="image/default.gif"/></a>
<a href="#">default</a>
</div>
</div>
</div>

再来是css

.tabArea {margin:5px;margin-bottom:0;font-family:Segoe UI;font-size:12px}
.tabHeader ul{list-style:none;padding:0;margin:0}
.tabHeader li{float:left;border:1px solid;border-bottom-width:0;margin:0 0.5em 0 0;width:90px}
.tabHeader li a{padding:0 1em;text-decoration:none}
.tabHeader #tabSelected{position:relative;top:1px;background:white}
.tabContent{border:1px solid;clear:both}
.tabContent a{text-decoration:none}
.tabContent img{border-width:0;height:90px;width:90px;float:left;padding:1px}

还有想问问下，如何不用table做出以下的效果


因为我还不太清楚float的性质,实在想不透如何把字放在图的下面但接下来的内容仍出现在图的旁边
我是web programming的初学者，本来用table是没问题的,可是后来发现网上资料都说div比table来得方便,所以自己自修下学学div,没想到却遇到问题
各位大大帮帮忙啊

[ 本帖最后由 unnamedx 于 25-5-2008 02:01 PM 编辑 ]

Darick_78560

我什么都看不到！

unnamedx

这话有很多意思
不知道可以说清楚点吗?

Darick_78560

圖片看不見！

unnamedx

应该可以了,换了hosting,imageshack好像很多问题似的

lakupo

如果要在img那里加float:left;的话， 我自己有两个方法解决：


1）<div class="tabContent">
            内容
            <div style='clear:both;'></div>
        </div>

2) tabContent 的css里面也加上float:left;


可能不是正确的做法啦~ 不过应该有效哦。。。试看看

unnamedx

哦，原来如此，刚刚试了的确可以
谢谢lakupo网友的帮助