0

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

我对 DIV 不太擅长，所以我放了一个表格来创建我想要的效果，在这里查看，我使用了以下代码：

<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 和 CSS 样式来获得相同的效果......

4

3 回答 3

4

这是一个简单的方法：

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; }​
于 2012-11-12T19:34:12.327 回答
1

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

PS：它不适用于IE7-。

于 2012-11-12T19:31:31.987 回答
0

提供的代码将生成第一行图像。你可以弄乱百分比来获得你想要的空白，但这里是基本的想法：

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>
于 2012-11-12T19:36:43.950 回答