如何將圖像浮動到div內的某個位置？

Question

我想在div上的某個位置放置圖像。 Here is what it looks like so far.盒裝區域是我希望顯示圖像（圈出來）的地方。

我累了複式方式尚未形象似乎只

1. 留在左
2. 向右移動，但文本

我試圖做到的，是在去將圖像放置在列出的文本的頂部，以便它可以填充空白區域。此外，我試圖確保滾動條不會出現。

任何幫助非常感謝！

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的還是要浮動的旁邊的元素之上。因此，只需在列表前移動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>