使用Inline-Block而不是Float进行图库布局

时间：2017-03-19 02:01:24

标签： html css

我有一个图片，标题和说明的图库。

图像使用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中复制重叠。

overlap title

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

2 个答案:

答案 0 :(得分：1)

将标题和文字换成新元素，将其设置为inline-block并包含它的宽度，使其适合同一行。

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

答案 1 :(得分：1)

如果您愿意使用display: flex，可以将标题和说明包装在div中并执行此操作。

<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="content-wrapper">
    <div class="title">
      <a href="#">Title</a>
    </div>
    <div class="description">
      Description description description description description description.
    </div>
  </div>
</div>

然后

.item-container {
  display: flex;

  width: 300px;
  min-height: 90px;
  margin: 0.2em;
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
  background: white;
}

您可以选择将display: flex添加到content-wrapper课程，也可以像这样

.content-wrapper {
  display: flex;
  flex-direction: column;
}

FWIW我在MBP上对此进行了测试，分辨率发生了变化，没有任何重叠。

相关问题
最新问题