Question

我有一个网站wallz.moon.pk，它是一个壁纸集合，在我展示缩略图的画廊中我创建了鼠标效果，鼠标在缩略图上显示半透明条带，以便用户可以选择适当的答案..

我对DIV不是很好，所以我放入一张表来创建我想要的效果，查看here，我使用了以下代码：

<div id="i551" class="actions">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
    <td align="center" colspan="2"><h2>Water Bubbles</h2></td>
</tr>
<tr>
    <td width="50%">
        <a href="Water+Bubbles.html" class="acthuns">Open Here</a>
    </td>
    <td width="50%">
        <a href="Water+Bubbles.html" class="acthuns" target="_blank">
            + New Tab </a>          
    </td>                                   
</tr>                           
</table>                    
</div>

我的问题是如何转换上面的表并使用DIV和＆amp; CSS样式可以获得相同的效果....

Answer 1

这是一个简单的方法：

http://jsfiddle.net/tNms9/3/

HTML

<div id="i551" class="actions">
    <div class="row">
        <h2>Water Bubbles</h2>
    </div>
    <div class="row">
        <div class="cell">
            <a href="Water+Bubbles.html" class="acthuns">Open Here</a>
        </div>
        <div class="cell">
            <a href="Water+Bubbles.html" class="acthuns" target="_blank">
            + New Tab </a>            
        </div>          
    </div>                   
</div>

CSS

.actions{ width:400px; }
.row { width:100%; overflow:hidden; background:lime; }
.cell {width:45%; padding:10px; float:left; background:orange; }

Answer 2

在CSS 2.1中，display属性具有表模型值，允许您为每个<table>已知元素设置元素的显示：https://developer.mozilla.org/en-US/docs/CSS/display#Values

PS：它不适用于IE7 - 。

Answer 3

提供的代码将生成第一行图像。您可以使用百分比来获得所需的空白区域，但这是基本的想法：

CSS：

.tile-container {
    width:100%;
    margin-left:-2%; /* offsets the first column of tiles */
}
.tile {
   float:left;
   width:23%;
   margin-left:2%;
   margin-bottom:2%;
}

HTML：

<div class="tile-container">
    <div class="tile>
       <!-- Image + other markup goes here -->
    <div>
    <div class="tile>
       <!-- Image + other markup goes here -->
    <div>
    <div class="tile>
       <!-- Image + other markup goes here -->
    <div>
    <div class="tile>
       <!-- Image + other markup goes here -->
    <div>
</div>

使用div-css复制表

3 个答案: