Question

我有两个我想要相邻的图像，但它们一个在另一个上面。这是代码：

<div style="float:left;">
<div style="float:left;">
<img src="/logo.png" style="float:left;" /></div> 
<div style="float:left;"> <img src="/logo2.png" width="55" style="float:left;" height="50"/</div>
</div>

请注意，包含两个图像的两个div本身都在一个浮动到左侧的div中。

感谢。

Answer 1

不要在Firefox上看到任何问题，也可以将html更改为

<div>
<div style="float:left;">
<img src="/logo.png"/></div> 
<div style="float:left;"> <img src="/logo2.png" width="55" height="50"/</div>
</div>

Answer 2

要防止换行，请为包含div指定宽度。在这种情况下，其宽度将等于两个图像的宽度之和。

<div style="width: 255;">
  <div style="float:left;">
    <img src="/logo.png" width="200" style="float:left;" />
  </div> 
  <div style="float:left;"> 
    <img src="/logo2.png" width="55" style="float:left;" height="50"/>
  </div>
</div>

如果在设计时未知内容的宽度，则上述操作无效。在这种情况下，您可以使用表行和表格单元CSS属性。这显示在下面的代码中。

<div style="display: table-row;">
  <div style="display: table-cell;">
    <img src="/logo.png" style="float:left;" />
  </div> 
  <div style="display: table-cell;"> 
    <img src="/logo2.png" width="55" style="float:left;" height="50" />
  </div>
</div>

html图像 - 两个相邻的图像

2 个答案: