css - 如何正确使用 inline-block 定位元素？

Question

我有一张图片、一个标题和一段描述。 我想在左侧显示图像，然后在其旁边显示标题和描述。

这对于 float 来说很容易，但是使用内联 block 有可能吗？不知道如何在不使用 float 的情况下正确显示它。

执行此操作的正确方法是什么？ float 是否“不好”使用？

JSFiddle:https://jsfiddle.net/g1euvcbx

.path-team {
        text-align: left;
        .item-list {
            width: 80%;
            margin: 0 auto;
        }
        .list-item {
            margin: 0;
            padding: 0;
        }
        .field__item {
            font-weight: bold;
            padding-bottom: 5px;
            p {
                font-weight: normal;
                padding-bottom: 25px;
            }
            img {
                margin: 0 auto;
                margin-bottom: 10px;
                padding: 0;
            }
        }
        /* positioning */
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {}
            ul {
                margin: 0;
                padding: 0;
            }
        }
    }

<div class="path-team">

<ul class="item-list">
  <li class="list-item">
    <div class="field-collection-item">
      <div class="content">
        <div class="field field--name-field-picture">
          <div class="field__item">
            <img src="https://i.gyazo.com/e201976d7a4fd5745d9cc1af713943b4.png" alt="Sofie">
          </div>
        </div>
        
        <div class="field field--name-team-name">
          <div class="field__item">
            Sofie
          </div>
        </div>
        
        <div class="field field--name-team-short-desc">
          <div class="field__item">
            <p>
              Bunch of text goes in here.
              Could be multiple lines of text.
              It's a description of the person.
              To the left we want the persons picture.
              At the top to the right of the picture we want the persons name in bold.
              Below that we want this text.
            </p>
          </div>
        </div>
        
      </div>
    </div>
  </li>
</ul>

</div>

这是我现在拥有的:

我想要的最终结果:

Answer 1

有多种方法可以实现这种布局。通常我会推荐使用 display: inline-block 或 display: flex。如果您不能决定走哪条路，请始终检查支持，在您的情况下为 display: inline-block和 display: flex .

您也可以将您的 HTML 结构简化为这样。这将适用于两种解决方案。

HTML

<div class="field">
  <img src="https://images.pexels.com/photos/192651/pexels-photo-192651.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Title">
  <div class="content">
    <h1>Title</h1>
    <p> Bunch of text goes in here. Could be multiple lines of text. It's a description of the person. To the left we want the persons picture. At the top to the right of the picture we want the persons name in bold. Below that we want this text. </p>
  </div>
</div>

显示:内联 block

CSS

* {
  box-sizing: border-box;
}

.field {
  width: calc(50% - 4px);
  background: #eee;
  font-size: 0;
  position: relative;
}

.field img,
.field .content {
  display: inline-block;
}

.field img {
  vertical-align: top;
  width: 30%;
}

.field .content {
   width: 70%;
   font-size: initial;
   padding: 10px 20px;
}

.content h1 {
  margin: 0;
}

* {
  box-sizing: border-box;
}
.field {
  width: calc(50% - 4px);
  background: #eee;
  font-size: 0;
  position: relative;
}
.field img,
.field .content {
  display: inline-block;
}
.field img {
  vertical-align: top;
  width: 30%;
}
.field .content {
  width: 70%;
  font-size: initial;
  padding: 10px 20px;
}
.content h1 {
  margin: 0;
}

<div class="field">
  <img src="https://images.pexels.com/photos/192651/pexels-photo-192651.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Title">
  <div class="content">
    <h1>Title</h1>
    <p>
      Bunch of text goes in here. Could be multiple lines of text. It's a description of the person. To the left we want the persons picture. At the top to the right of the picture we want the persons name in bold. Below that we want this text.
    </p>
  </div>
</div>

显示: flex

CSS

.field {
  width: 50%;
  background: #eee;
  display: flex;
  align-items: flex-start;
}

img {
  max-width: 200px;
}

.field .content {
  padding: 10px 20px;
}

.content h1 {
  margin: 0;
}

.field {
  width: 50%;
  background: #eee;
  display: flex;
  align-items: flex-start;
}
img {
  max-width: 100px;
}
.field .content {
  padding: 10px 20px;
}
.content h1 {
  margin: 0;
}

<div class="field">
  <img src="https://images.pexels.com/photos/192651/pexels-photo-192651.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Title">
  <div class="content">
    <h1>Title</h1>
    <p>
      Bunch of text goes in here. Could be multiple lines of text. It's a description of the person. To the left we want the persons picture. At the top to the right of the picture we want the persons name in bold. Below that we want this text.
    </p>
  </div>
</div>