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>があり、既知の各要素に要素の表示を設定できます： 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 に答える