Question

我有图像，标题和描述。我想在左侧显示图像，然后在旁边显示标题和说明。

浮点数很容易，但使用内联块是否可行？如果不使用花车，无法弄清楚如何正确显示它。

这样做的正确方法是什么？漂浮物“不好”吗？

.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

浮动本身没有问题但是，如果你想依赖inline-block，你可以这样做：

在新的div标记中添加名称和说明标记，如下所示：

<div class="info-container">
    <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>

然后添加这些css规则：

.field-name-field-picture, .info-container {
   display: inline-block;
   vertical-align: top;
}

.info-container {
   width: 300px;
}

（请注意，在.field-name-field-picture中删除了两个连字符，这是因为两个连续的连字符构成了一个无效的类。）

jsFiddle

Answer 2

有多种方法可以实现此布局。通常我建议使用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>

显示：内联块

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何正确使用内联块来定位元素？

2 个答案:

显示：内联块

display：flex