3

HTMLとCSSでメディアライブラリテンプレートを作成しようとしています。このテンプレートで画像をテーブルに追加できます。画像のすぐ下にキャプションを追加したいと思います。

しかし、私の出力は現在間違っています。私は得る：

ここに画像の説明を入力してください

テキストの配置が間違っています。画像の真下と中央にテキストを配置する方法が見つかりません。

これが私のコードテンプレートです：

<div align="center" class="tile_div">
<table class="tile_table">
<tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
    <td>
        <img class="tile_image" height="60px" width="60px" src="default.jpg"/> 
        <p class="tile_p">Sound</p>
    </td>
</tr>
</tr>
</table>

私のCSSは次のとおりです。

.tile_div{
    text-align: center;
    width: 100%;
}

.tile_table{
    border-collapse:collapse;
}

.tile_table tr, td{
}

.tile_image{
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

.tile_p{
    display: inline;
}

誰かがこの問題の解決策を手伝ってもらえますか？

4

4 に答える 4

3

答えを提供してくれたZoltanTothの功績はすべて、

.tile_p{
    display: inline;
}

私はあなたのコードをフィドルに変換しました

于 2013-01-09T21:21:10.917 に答える
2

どうぞ。

html

<table class='tile_table'>
  <tr>
    <td>
      <img class="tile_image" height="60px" width="60px" src="default.jpg"/>
      <p class="tile_p">Sound</p>
    </td>
    <td>
      <img class="tile_image" height="60px" width="60px" src="default.jpg"/>
      <p class="tile_p">Sound</p>
    </td>
    <td>
      <img class="tile_image" height="60px" width="60px" src="default.jpg"/>
      <p class="tile_p">Sound</p>
    </td>
    <td>
      <img class="tile_image" height="60px" width="60px" src="default.jpg"/>
      <p class="tile_p">Sound</p>
    </td>
  </tr>
</table>

CSS

.tile_table{
  border-collapse:collapse;
}

.tile_table td {
  text-align: center;
}

.tile_image{
  padding: 5px 5px 5px 5px;
  margin: 5px 5px 5px 5px;
}
于 2013-01-09T21:19:55.240 に答える
1

解決するために、問題はメインコメントで@ZoltanTothによって言及されたdivタグを閉じることでした。

動作し、目的の出力を作成するコードは次のとおりです。

HTML:

        <div align="center" class="tile_div">
            <table class="tile_table">
                <tr>
                    <td>
                        <img class="tile_image" height="100px" width="100px" src="default.jpg"/> 
                        <p class="tile_p">Sound</p>
                    </td>
                    <td>
                        <img class="tile_image" height="100px" width="100px" src="default.jpg"/> 
                        <p class="tile_p">Sound</p>
                    </td>
                    <td>
                        <img class="tile_image" height="100px" width="100px" src="default.jpg"/> 
                        <p class="tile_p">Sound</p>
                    </td>
                </tr>
            </table>
        </div>

CSS :

.tile_div{
    text-align: center;
    width: 100%;
}

.tile_table{
    border-collapse:collapse;
}

.tile_table tr, td{
  text-align: center;
}

.tile_image{
    padding: 3px 5px 0px 3px;
    margin: 5px 5px 0px 5px;
}

.tile_p{
    line-height: 0px;
}

ご意見ありがとうございます。ありがとうC.

于 2013-01-13T18:28:29.470 に答える
0 
<?php
echo '<div align="center" class="tile_div">';
echo '<table class="tile_table">';
echo "<tr>";
for($i=0;$i<4;$i++){
echo "<td><table><tr><td>";
echo '<img class="tile_image" height="60px" width="60px" src="default.jpg"/></td></tr>'; 
echo '<tr><td><p class="tile_p">Sound</p></td></tr></table>';
echo "</td>";
 }
echo "</tr>";
echo '</table>';
echo '</div>';
?>

テーブル内のテーブル。

于 2013-01-09T21:20:50.200 に答える