如何将图像浮动到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＆＃39;也需要在ul中，并且不推荐使用center标记 - 您需要使用CSS代替。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;