2017-01-25 8 views
0

画像にリンクを設定する必要があります。私はテーブルでそれを設定しなければなりませんでした。しかし、なぜ画像が全幅でリンクしているのか理解できません。つまり、背景色もリンクです。そのリンクは写真の上にだけあるべきです。画像はリンクされていてバックグラウンドではありません

divタグの場合、ラッパーで解決できますが、テーブル内でそれを解決する方法はわかりません。

My Example

これは私のコードです:

<body> 
    <table class="wrapper" align="center"> 
    <tr> 
     <td class="wrapper-inner"> 
     <!-- Row 1 --> 
     <table class="row collapse" > 
      <tbody> 
      <tr> 
       <th class="small-12 large-12 columns first"> 
       <table> 
        <tr> 
        <th> 
         <a href="https://www.google.dk/"><img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" ></a> 
        </th> 
        <th class="expander"></th> 
        </tr> 
       </table> 
       </th> 
      </tr> 
      </tbody> 
     </table> 
     <!-- Row 2 --> 
     <table class="row collapse bgcolor--blue"> 
      <tbody> 
       <tr> 
       <th class="small-12 large-12 columns"> 
        <table> 
        <tr> 
         <th> 
          <a href="https://www.google.dk/"><img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center"></a> 
         </th> 
         <th class="expander"></th> 
        </tr> 
        </table> 
       </th> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </table> 
</body> 
+2

が親 ''画像、テキスト、整列のth'与えるコメント@SpencerMay使用

th { text-align: center; } th a { display: inline-block; } 

編集:このCSSを試してみてくださいcenter'スタイルを、そしてディスプレイ 'に画像表示を設定します。インライン-block; ' –

+0

答えをありがとう。私はそれが問題を解決するのを見ることができます。 CSSを10種類の写真に再利用する必要があります。外部のスタイルシートでそれを設定できる、きれいでいい方法がありますか?私は現時点でBEMを学びたいと思っています。 – McDuck4

+0

適切な方法は、あなたがスタイルを付けたいCSSのスタイルを設定してからCSSをスタイルシートに設定することです。 Ex。しかし、あなたのサンプルリンクをもう一度見て、あなたがこのコードをどのように使用するのか気づいたと思います。私は、簡単なウェブサイトレイアウトを設定する適切な方法は、テーブルではありません。このjsfiddleを確認してください:https://jsfiddle.net/0L9op2gt/ –

答えて

1

私はこれが起こるはず気づきませんでした。

+1

答えをありがとうございます。 @'タグの@Spencerが提案するように、' style = "text-align:center;" 'を設定してください外部のスタイルシートでどのように設定するのですか?私がBEMを学んでいる瞬間。 – McDuck4

+0

上記のコードで