html - div有问题吗？

Question

好吧，我对 CSS 还很陌生，对 HTML 也只是最低限度的熟悉，所以我仍然对这两者摸不着头脑。我正在建立一个练习站点，但我无法弄清楚我在这里做错了什么。我的目标是让图像框位于标题和段落的左侧，但标题与图像顶部位于同一行。这是我拥有的:

<img src="" />
<div class="bios">
  <h4>First Last</h4>
  <p>This is my bio</p>
</div>

与此 CSS 配对:

        .bios {
          height: 100px;
          width: auto;
          display: inline;
          background-color: #a78ffc;
          clear: left;
          display: inline;
          /** top, right, bottom, left **/
          margin: 1px 1px 1px 10px;
          /** top, right, bottom, left **/
          padding: 1px 1px 1px 10px
        }

        img {
           height: 100px;
           width: 100px;
           float: left;
           clear: left;
           display: inline;
         }

我添加了背景颜色以真正了解预览中发生的事情，但我比以往任何时候都更加困惑。这是它的显示方式:

http://i1126.photobucket.com/albums/l618/spenciecakes/Screen%20Shot%202016-05-13%20at%2010.41.45%20AM_zps50dajzko.png

编辑 好的，我已经按照要求添加了额外的代码，并且我已经添加了 display: inline 到两个元素，但老实说，它们看起来都是一样的..

Answer 1

我不能只用你提供的代码解决你的问题(图像的代码是什么？)，但我可以告诉你当前代码有什么问题。首先，为了使 width 和 height 属性起作用，需要将 display 属性设置为 inline-block 或 block 。

其次，float 属性没有值center。它只能取值 left 和 right(在这种情况下你需要第一个)。