Question

我正在尝试使用div和span显示多个图片。

div.graph {
  white-space: nowrap;
}

span.graph {
  display: inline-block;
}

img.graph {
  width: 50%;
  height: 50%;
}

<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>
<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>

第一行图像正确显示。第二行只有一个图像，它小于第一行中的图像。

如何更改我的HTML和CSS，以便第二行中的图像与第一行中的图像大小相同？

Answer 1

我删除了内联块，看起来不错：

＆＃13;

div.graph {
  white-space: nowrap;
}

img.graph {
  width: 50%;
  height: 50%;
}

＆＃13;

<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>
<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>

＆＃13;

这是有效的，因为white-space: nowrap;中的div与width: 50%;中的img相结合，足以获得所需的结果。 inline-block值用于使块元素（例如div）的行为类似于内联元素（例如span），并且不应添加到span元素中。

Answer 2

代码bolow更像是一种解决方法。我认为有更好的解决方案。

将另一个图像添加到第二行并为其添加一个额外的类，例如<TextBlock x:Name="CatName" Text="{Binding Cat.name, Mode=OneWay}" />，然后在css中添加：

.hide

img.hide {
  visibility: hidden;
}

div.graph {
  white-space: nowrap;
}

span.graph {
  display: inline-block;
}

img.graph {
  width: 50%;
  height: 50%;
}

img.hide {
  visibility: hidden;
}

希望有所帮助

Answer 3

将span.graph上的内联块更改为display：flex;

inline-block有许多奇怪的问题，白色空间和间距可以通过使用flexes来避免。

要在行之间重新添加空格，您只需在div中添加边距。

通过调整大小，每个div显示两个内嵌图像

3 个答案: