假设我们有一个旧式的六到八种产品,这些产品都包含在带边框的表格中(所谓的领导者或特殊产品)。是表格数据吗?是否值得用div替换它?如果是,那我该怎么办呢?
谢谢。
我想到以下几点:
这些产品不相关。从这个角度来看,这不是表格数据。
此表也有边框,由于液体布局(宽度为%),我无法用div(或可能不知道)模拟。
此表位于主页面上。而且我希望能够更方便地使用移动设备等设备。
所以我应该使用div但不知道最好的方法。顺便说一句,我认为这是现代网站不使用边框的主要原因,但是“阻塞”没有边框崩溃。
谢谢大家。
补充说:简单地说,我们有一个包含两行,六个单元格和border = 1的表格。这是一个我想保留的老式设计。
有问题: - 边界 - 边界崩溃
我只想知道经验丰富的设计师如何解决这个问题。怎么办?
抱歉这么多话。是的,我知道截图,但没有什么特别的表,每个单元格中都有一个图像。
答案 0 :(得分:3)
将表用于真正的表没有任何问题,只需在代码中设置表结构,并使用纯css格式化它。 (表格数据本质上必须至少包含两行和每列标题。)在构建[整个]页面布局时,只需要避免使用表格。
答案 1 :(得分:0)
如果您想突出显示某些产品,请将它们显示为' block'而不是表格行,我会把它们放在div中,是的。
<div class="product">some product<br /><img src="product.jpg" /></div>
<div class="product">some other product<br /><img src="product.jpg" /></div>
<div class="product">yet some other product<br /><img src="product.jpg" /></div>
CSS:
div.product {
width: 100px;
height: 100px;
float: left;
}
清除&#39; div的浮动,你需要在最后一个产品div下面这样的东西。
<div style="clear: both;"></div>
否则,您的下一个元素将位于产品的下方/上方。
答案 2 :(得分:0)
我可能误解了(您可以提供链接或屏幕截图),但这听起来像不是表格数据。您所描述的是产品的 LIST ,因此它应该放在<UL>
无序列表或<OL>
有序列表中(如果订单很重要,则后者)。< / p>
所以你的产品看起来像:
<ul id="lead-products">
<li>
Amazing Product - $10.65
...
</li>
...
</ul>
然后使用CSS你可以给它一些风格:
#lead-products { //the list
list-style: none; /* make it not display list markers */
overflow: hidden; /* used to clear up floats */
margin: 0;
}
#lead-products li { /* these are your elements/products */
margin: 5px; /* some space around it */
float: left; /* float them to the left so they are besides each other */
border: 1px solid black; /* border around the products */
width: 20%; /* dynamic width as you needed */
}