Question

好吧，我对CSS非常陌生，只是对HTML非常熟悉，所以我仍然对它们两者都有点蠢蠢欲动。我正在建立一个练习网站，但我无法弄清楚我在这里做错了什么。我的目标是将图像框放在标题和段落的左侧，但标题与图像顶部在同一行。这就是我所拥有的：

＆＃13;

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

＆＃13;

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

修改好的，我已根据要求添加了额外的代码，并且我添加了显示：内联到两个元素但老实说它们看起来都一样..

Answer 1

我只能使用您提供的代码解决问题（图像的代码是什么？），但我可以告诉您当前代码的错误。首先，为了使width和height属性有效，display属性需要设置为inline-block或block。

其次，float属性不的值为center。它只能取值left和right（在这种情况下你需要第一个）。

Answer 2

负边距技巧就像魅力（代码注释中的解释）

.bio {
  overflow: hidden; /* Prevent negative margin from leaking out */
}

.bio-inner {
  overflow: hidden; /* Clearfix */
  margin-left: -1em; /* A) Remove spacing between items when they are against the left side (Must be negative B) */
}

.bio-thumbnail {
  height: 3em;
  width: auto;
  background-color: #a78ffc;
}

.bio-thumbnail,
.bio-info {
  float: left;
  margin-left: 1em; /* B) Add spacing between items (Must be positive A) */
}

.bio-info-heading {
  margin: 0em; /* Just removing default margins */
}

.bio-info-text {
  margin-top: 0.5em;
}

<div class="bio">
  <div class="bio-inner">
    <img class="bio-thumbnail" src="http://i.stack.imgur.com/7bI1Y.jpg">
    <div class="bio-info">
      <h4 class="bio-info-heading">First Last</h4>
      <p class="bio-info-text">This is my bio</p>
    </div>
  </div>
</div>

我发现，在屏幕可能太小而无法并排显示图像和文字的情况下，这种情况效果最佳。

Answer 3

您可以使用display: inline-block。

.inline {
  display: inline-block;
}

.title {
  font-weight: bold;
}

<div>
  <div class="inline">
    <img src="http://placehold.it/50x50" />
  </div>
  <div class="inline">
    <div class="title">Item 1</div>
    <p>Item 1 description</p>
  </div>
</div>

<div>
  <div class="inline">
    <img src="http://placehold.it/50x50" />
  </div>
  <div class="inline">
    <div class="title">Item 2</div>
    <p>Item 2 description</p>
  </div>
</div>

div的麻烦？

3 个答案: