css - 画像は常に DIV 内にあるとは限りません

Question

をでラップしようとしimgていdivます。問題は、画像がの左側に読み込まれることdivです。現在、画像がありdiv、ロードされる前に画像サイズを知っています。寸法は画像のdiv寸法に設定されていますが、画像は div の左側に読み込まれています。画像に垂直方向の位置合わせを追加することさえすべて試しましたが、最も近いのdivは、画像の右側にあるテキストの下に div をロードした絶対値の位置を作成することでした。おそらくdiv元の画像内の別の画像を読み込むことができますが、私の場合はSEOに悪影響を与える可能性があります.

画像の位置 ここに画像の説明を入力

HTML

<ul id="UL_1" class="ab-submenu">
    <li id="LI_2">
        <a class="ab-item" tabindex="-1" href="http://techdigy.com/wp-admin/profile.php" id="A_3"></a>
        <div class="avatar-holder" id="DIV_4">
            <img alt="" src="http://1.gravatar.com/avatar/95fef2e7b4a23f9cc0439619db1af0a6?s=64&amp;d=identicon&amp;r=G" class="avatar avatar-64 photo" height="64" width="64" id="IMG_5" />
        </div><span class="display-name" id="SPAN_6">Andre</span>
    </li>
    <li id="LI_7">
        <a class="ab-item" href="http://techdigy.com/wp-admin/profile.php" id="A_8">Edit My Profile</a>
    </li>
    <li id="LI_9">
        <a class="ab-item" href="http://techdigy.com/wp-login.php?action=logout&amp;_wpnonce=c7d2e50651" id="A_10">Log Out</a>
    </li>
</ul>

CSS

#UL_1 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: auto;
    line-height: 28px;
    list-style: none outside none;
    margin: 0px;
    outline: rgb(204, 204, 204) none 0px;
    padding: 6px 0px;
    position: relative;
    text-align: left;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    width: auto;
    z-index: 99999;
}/*#UL_1*/

#LI_2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: auto;
    line-height: 28px;
    list-style: none outside none;
    margin: 6px 16px 15px 88px;
    outline: rgb(204, 204, 204) none 0px;
    position: relative;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    width: auto;
    z-index: 99999;
}/*#LI_2*/

#A_3 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(33, 117, 155);
    color: rgb(33, 117, 155);
    display: block;
    font: normal normal normal 13px/26px sans-serif;
    line-height: 26px;
    list-style: none outside none;
    min-width: 140px;
    outline: rgb(33, 117, 155) none 0px;
    padding: 0px 12px 0px 8px;
    text-align: left;
    text-decoration: none;
    transition: none 0s ease 0s;
    white-space: nowrap;
}/*#A_3*/

#DIV_4 {
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: 64px;
    line-height: 28px;
    list-style: none outside none;
    outline: rgb(204, 204, 204) none 0px;
    text-align: left;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    white-space: nowrap;
    width: 64px;
}/*#DIV_4*/

#IMG_5 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    display: block;
    font: normal normal normal 13px/28px sans-serif;
    height: 64px;
    left: -72px;
    line-height: 28px;
    list-style: none outside none;
    outline: rgb(204, 204, 204) none 0px;
    position: absolute;
    text-align: left;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    top: 4px;
    transition: none 0s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    width: 64px;
}/*#IMG_5*/

#SPAN_6 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    display: block;
    font: normal normal normal 13px/28px sans-serif;
    height: 18px;
    line-height: 28px;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
    text-align: left;
    transition: none 0s ease 0s;
    white-space: nowrap;
}/*#SPAN_6*/

#LI_7, #LI_9 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: auto;
    line-height: 28px;
    list-style: none outside none;
    margin: 0px 16px 0px 88px;
    outline: rgb(204, 204, 204) none 0px;
    position: relative;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    width: auto;
    z-index: 99999;
}/*#LI_7, #LI_9*/

#A_8, #A_10 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(33, 117, 155);
    color: rgb(33, 117, 155);
    display: block;
    font: normal normal normal 13px/26px sans-serif;
    height: 26px;
    line-height: 26px;
    list-style: none outside none;
    min-width: 140px;
    outline: rgb(33, 117, 155) none 0px;
    padding: 0px 12px 0px 8px;
    text-align: left;
    text-decoration: none;
    transition: none 0s ease 0s;
    white-space: nowrap;
}/*#A_8, #A_10*/

score 2 · Accepted Answer

これは正しい動作です。img完全-72pxに左に4px上から配置しています。

#IMG_5 {
    position:absolute;
    left: -72px;
    top: 4px;
}

imgをの中に入れたい場合はdiv、絶対配置を削除します。

を移動しようとしていた場合は、divではなく、この配置をそれに適用しますimg。そうすることで、imgも子供なので同じ立場になります。

jsFiddle の例

css - 画像は常に DIV 内にあるとは限りません

1 に答える 1

Related

Reference