html - 使用内联 block 而不是 float 进行画廊布局

Question

我有一个包含图像、标题和描述的画廊。

图像使用 float: left; 而标题和描述堆叠在它的右侧。

https://jsfiddle.net/aeuz0n8g/

我正在寻找一种在图像上使用 display: inline-block; 而不是 float 的方法，但描述不会堆叠在标题下。

https://jsfiddle.net/5jbswg39/

.item-container {
  display: inline-block;
  width: 300px;
  min-height: 90px;
  margin: 0.2em;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
  background: white;
}

.img-wrapper {
  float: left;
  max-width: 50px;
  max-height: 60px;
  height: 60px;
  margin: 0.6em 1em 0 0;
  text-align: center;
  background: gray;
}

.img-wrapper img {
  width: auto;
  max-width: 50px;
  max-height: 50px;
  vertical-align: top;
}

.title {
  max-width: 275px;
  font-size: 1.05em;
  font-weight: 700;
  padding: 0.3em 0;
  text-align: left;
  vertical-align: top;
}

.description {
  max-width: 275px;
  font-size: .9em;
  line-height: 1.4em;
  text-align: left;
  vertical-align: top;
}

<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div>
  <div class="title">
    <a href="#">Title</a>
  </div>
  <div class="description">
    Description description description description description description.
  </div>
</div>

注意:这是对我为什么要使用 inline-block 而不是 float 的解释。

由于未知原因，当在 Chrome 中使用我的完整网站时，在 720p 分辨率下，标题将与图像重叠。但不是在 Firefox、IE 或 1080p 中。

我只能显示屏幕截图，因为它是在我的计算机上开发的本地站点。但是 JSFiddle 链接是正在使用的确切代码。虽然我无法在 JSFiddle 中复制重叠部分。

我无法调试问题，因为当我检查元素并触摸 css 的 any 时，标题重置为正常，不再重叠。所以我想我会尝试替代 css 来实现相同的布局，看看它是否可以解决问题。我认为这可能是 chrome 的 float 渲染故障。

Answer 1

将标题和文本包裹在一个新元素中，将其设置为 inline-block 并包含它的宽度，以便它们适契约(Contract)一行。

.info {
  width: calc(100% - (50px + 1em));
  display: inline-block;
  vertical-align: top;
}

这是一个演示。

.item-container {
  display: inline-block;
  width: 300px;
  min-height: 90px;
  margin: 0.2em;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
  background: white;
}

.img-wrapper {
  display: inline-block;
  max-width: 50px;
  max-height: 60px;
  height: 60px;
  margin: 0.6em 1em 0 0;
  text-align: center;
  background: gray;
}

.img-wrapper img {
  width: auto;
  max-width: 50px;
  max-height: 50px;
  vertical-align: top;
}

.title {
  display: inline-block;
  max-width: 275px;
  font-size: 1.05em;
  font-weight: 700;
  padding: 0.3em 0;
  text-align: left;
  vertical-align: top;
}

.description {
  display: inline-block;
  max-width: 275px;
  font-size: .9em;
  line-height: 1.4em;
  text-align: left;
  vertical-align: top;
}

/* added this */
.info {
  width: calc(100% - (50px + 1em));
  display: inline-block;
  vertical-align: top;
}

<!-- Item 1 -->
<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div><!--
  --><div class="info">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>

<!-- Item 2 -->
<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div><!--
  --><div class="info">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>

<!-- Item 3 -->
<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div><!--
  --><div class="info">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>

您还可以将其设为 flex 布局，在左/右部分之间使用默认的 flex-direction: row，并为标题使用 flex-direction: column/文本。

.item-container {
  display: inline-flex;
  width: 300px;
  min-height: 90px;
  margin: 0.2em;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
  background: white;
}

.img-wrapper {
  max-width: 50px;
  max-height: 60px;
  height: 60px;
  margin: 0.6em 1em 0 0;
  text-align: center;
  background: gray;
}

.img-wrapper img {
  width: auto;
  max-width: 50px;
  max-height: 50px;
  vertical-align: top;
}

.title {
  font-size: 1.05em;
  font-weight: 700;
  padding: 0.3em 0;
  text-align: left;
}

.description {
  max-width: 275px;
  font-size: .9em;
  line-height: 1.4em;
  text-align: left;
}

.info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

<!-- Item 1 -->
<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div><!--
  --><div class="info">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>

<!-- Item 2 -->
<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div><!--
  --><div class="info">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>

<!-- Item 3 -->
<div class="item-container">
  <div class="img-wrapper">
    <a href="#">
      <img src="https://i.imgur.com/Bt0p3FG.jpg" width="70" height="70">
    </a>
  </div><!--
  --><div class="info">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>