1

私のウェブサイトにアップロードされたすべての画像には、サムネイルの周りにフレームがあります。アップロードされた画像とともに、ユーザーの名前とアバターの写真をフレームに表示する余地があるように設定しました。これらの 2 つの画像が、私が達成しようとしていることをよりよく理解してくれることを願っています。 imgur へのリンク

これをユーザー名とプロフィール写真に使用します。

<?php if( $ib->user['id'] ) {?>
div class="userInfo">
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib->user['avatar']; ?>"/>
<div class="name">
    <strong>
        <a href="<?php echo Config::$absolutePath.'user/'.$ib->user['name']; ?>"><?php echo $ib->user['name']; ?></a>
    </strong>
</div>

そして、これはアップロードの周りのフレーム用です

#imageGrid div {
        position: absolute;
        overflow: hidden;
        border-radius: 0px;
  border: 1px solid #FFFFFF;
 padding: 60px 10px 10px 10px;
 moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow:         3px 3px 5px 6px #a1a1a1;
 background-color: #dddddd;

次に何を試すべきか見当がつかなかったので、divを追加/結合するだけでよいかどうかを確認したかったのですが、うまくいきません。

さらに詳しい情報、より良い説明、または追加のコードが必要な場合は、お知らせください。前もって感謝します。私はこれにかなり慣れていません。これが私がこだわっていることの 1 つです。

4

1 に答える 1

1

その中にあるもののレイアウトを制御するコンテナ要素にそれらを配置する必要があります。 userInfo を使用できます

<div class="userInfo">
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib-      >user['avatar']; ?>"/>
<div class="name">
<strong>
    <a href="<?php echo Config::$absolutePath.'user/'.$ib->user['name']; ?>"><?php echo $ib->user['name']; ?></a>
</strong>
</div>
</div>

.userInfo {
width:50px;
 }

.avatar {
width:40px;
}

.name {
width:40px;
 }

#imageGrid div については、そこにあるもののほとんどを削除し、上で追加した特定の CSS クラスに適用します。

于 2013-02-15T01:32:44.427 に答える