div内の特定の場所に画像を浮動させる方法は？

Question

divの特定の場所に画像を配置しようとしています。 Here is what it looks like so far.ボックス領域は、画像を表示する場所です（丸で囲んでいます）。

I疲れmutliple方法はまだ画像のみ

1. に思える右へ左
2. 移動に残っているが、私は達成しようとしているどのようなテキスト

の下に行くがされリストされたテキストの上にイメージを配置して、空の領域を埋めることができます。また、スクロールバーがでないことを確認しようとしています。

ご協力いただきありがとうございます。あなたはそれの横に浮かべたい要素の上にあることをimgが必要

CSS

body { 
    font-size: 12px; 
    background-color: #f1f6f9; 
    color: #7e7e7e; 
    background-image: url("none.png"); 
    background-repeat: repeat; 
} 

* { 
    cursor: url('cursor.png'), auto; 
} 

.box { 
    border-style: solid; 
    border-width: 1px; 
    box-shadow: 3px 3px black; 
    border-color: #000; 
    background-color: #ffffff; 
    margin-top: 100px; 
    margin-bottom: 10px; 
    margin-right: auto; 
    margin-left: auto; 
    padding: 15px 22px 15px 22px; 
    height: 250px; 
    width: 265px; 
    font-family: 'mplus 1p', sans-serif; 
    overflow-y: auto; 
    overflow-x: hidden; 
    position: relative; 
} 

.links { 
    text-align: center; 
    border-style: solid; 
    border-width: 1px; 
    box-shadow: 3px 3px black; 
    border-color: #000; 
    background-color: #ffffff; 
    margin-top: none; 
    margin-right: auto; 
    margin-left: auto; 
    padding: 10px; 
    height: 15px; 
    width: 289px; 
    font-family: 'mplus 1p', sans-serif; 
} 

.icon { 
    width: auto; 
    height: 85px; 
    border-radius: 50px; 
    margin-bottom: 12px; 
} 

li { 
    list-style-image: url('bullet1.gif'); 
    list-style-position: inside; 
    margin-left: 1em; 
} 

::-webkit-scrollbar { 
    width: 5px; 
    height: auto; 
} 

::-webkit-scrollbar-thumb { 
    background: #ffc9e5; 
    border: 1px solid #000; 
    border-right: none; 
} 

::-webkit-scrollbar-track { 
    background: #d6ffee; 
    border-left: 1px solid #000; 
} 

::-webkit-scrollbar-corner { 
    background: transparent; 
} 

HTML

<div class="box"> 
<center><img class="icon" src="icon1.png"></center> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li><a href="personality.html">text</a></li> 
    <li><a href="more.html">text</a></li> 
    <img src="bunny1.gif" style="float: right"> 
    </div> 
    <div class="links"> 
    text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text 
    </div> 

Answer 1

。リストの前にimgを移動するだけです。ページ上で下に移動する場合は、marginまたはtransform: translateY()を使用します。

li 'もulにする必要があります。centerタグは廃止されました。その代わりにCSSを使用する必要があります。

body { 
 
    font-size: 12px; 
 
    background-color: #f1f6f9; 
 
    color: #7e7e7e; 
 
    background-image: url("none.png"); 
 
    background-repeat: repeat; 
 
} 
 

 
* { 
 
    cursor: url('cursor.png'), auto; 
 
} 
 

 
.box { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    box-shadow: 3px 3px black; 
 
    border-color: #000; 
 
    background-color: #ffffff; 
 
    margin-top: 100px; 
 
    margin-bottom: 10px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding: 15px 22px 15px 22px; 
 
    height: 250px; 
 
    width: 265px; 
 
    font-family: 'mplus 1p', sans-serif; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
} 
 

 
.links { 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    box-shadow: 3px 3px black; 
 
    border-color: #000; 
 
    background-color: #ffffff; 
 
    margin-top: none; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding: 10px; 
 
    height: 15px; 
 
    width: 289px; 
 
    font-family: 'mplus 1p', sans-serif; 
 
} 
 

 
.icon { 
 
    width: auto; 
 
    height: 85px; 
 
    border-radius: 50px; 
 
    margin-bottom: 12px; 
 
} 
 

 
li { 
 
    list-style-image: url('bullet1.gif'); 
 
    list-style-position: inside; 
 
    margin-left: 1em; 
 
} 
 

 
::-webkit-scrollbar { 
 
    width: 5px; 
 
    height: auto; 
 
} 
 

 
::-webkit-scrollbar-thumb { 
 
    background: #ffc9e5; 
 
    border: 1px solid #000; 
 
    border-right: none; 
 
} 
 

 
::-webkit-scrollbar-track { 
 
    background: #d6ffee; 
 
    border-left: 1px solid #000; 
 
} 
 

 
::-webkit-scrollbar-corner { 
 
    background: transparent; 
 
} 
 

 
ul { 
 
    padding: 0; margin: 0; 
 
} 
 
.center { 
 
    text-align: center; 
 
}

<div class="box"> 
 
    <div class="center"><img class="icon" src="icon1.png"></div> 
 
    <img src="bunny1.gif" style="float: right; margin-top: 2em;"> 
 

 
    <ul> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li><a href="personality.html">text</a></li> 
 
    <li><a href="more.html">text</a></li> 
 
    </ul> 
 
</div> 
 
<div class="links"> 
 
    text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text <img src="bullet2.png" style="margin-left:2px; margin-right:2px"> text 
 
</div>