Question

如何用 DIV 或 SPAN 等标签 替代 TABLE （想要实现图片中的功能）?

为什么用这个不行啊？
<div>
<div>
<div><IMG src="/201211016942650.bmp" width=150 height=260></div>
<div><IMG src="/2012110161136943.bmp" width=150 height=260></div>
<div><IMG src="/201211016818422.bmp" width=150 height=260></div>
<div><IMG src="/201211016548577.bmp" width=150 height=260></div>
</div>
<div>
<div>欧韵系列</div>
<div>沙发系列</div>
<div>恒典系列</div>
<div>朗逸系列</div>
</div>
</div>

用这个也不行啊？
<span>
<span>
<span><IMG src="/201211016942650.bmp" width=150 height=260></span>
<span><IMG src="/2012110161136943.bmp" width=150 height=260></span>
<span><IMG src="/201211016818422.bmp" width=150 height=260></span>
<span><IMG src="/201211016548577.bmp" width=150 height=260></span>
</span>
<span>
<span>欧韵系列</span>
<span>沙发系列</span>
<span>恒典系列</span>
<span>朗逸系列</span>
</span>
</span>
为了实现这个布局

Answer 1

<div>
<div>
<div><IMG src="/201211016942650.bmp" width=150 height=260> </br>欧韵系列</div>
<div><IMG src="/2012110161136943.bmp" width=150 height=260> </br>欧韵系列</div>
<div><IMG src="/201211016818422.bmp" width=150 height=260> </br>欧韵系列</div>
<div><IMG src="/201211016548577.bmp" width=150 height=260> </br>欧韵系列</div>
</div>
</div>

这样可以的,
1 因为SPAN, img 是行元素 不是块元素,他们不会自动从新的一行开始的
2 你可以加个css SPAN{display:block;} 就跟用DIV一样了....

Answer 2

这应该是你要的效果；
html代码：
<div id="main">
<ul>
<li><IMG src="/201211016942650.bmp" width=150 height=260><span>欧韵系列</span></li>
<li><IMG src="/2012110161136943.bmp" width=150 height=260><span>欧韵系列</span></li>
<li><IMG src="/201211016818422.bmp" width=150 height=260><span>欧韵系列</span></li>
<li><IMG src="/201211016548577.bmp" width=150 height=260><span>欧韵系列</span></li>
</ul>
</div>

css代码：
ul { list-style:none;}
#main li { float:left; }
#main img {border:2px #999999 solid;padding:5px}
#main span {
display:block;
padding:5px;
text-align:center;
border-left:2px #999999 solid;
border-right:2px #999999 solid;
border-bottom:2px #999999 solid;
font-weight:bold}

<span>是行内元素，里面不能包含东西，除非把他变为块。<div>则是块元素，独占一行。

纯手工打字。。。

Answer 3

<div>
<ul>
<li><IMG src="/201211016942650.bmp" width=150 height=260><span>欧韵系列</span></li>
<li><IMG src="/2012110161136943.bmp" width=150 height=260><span>欧韵系列</span></li>
<li><IMG src="/201211016818422.bmp" width=150 height=260><span>欧韵系列</span></li>
<li><IMG src="/201211016548577.bmp" width=150 height=260><span>欧韵系列</span></li>
</ul>

</div>

css文件中让li左浮动，float：left;至于细节你自己调吧！

追问

为什么这样也不行？

欧韵系列
沙发系列
恒典系列
朗逸系列

Answer 4

TABLE就是表格布局 你上面写的两个方法都是多此一举 很没必要 这个布局用表格布局是最简单最方便的

追问

能不能不用table写出这样的一个表格来

追答

可以