将图像放在div的右侧，而将其他图像放在中间

Question

我有以下代码：

CSS

.producttype {

  height:16%;
  width:16%;
}

HTML

<div style="width:100%; box-shadow: 5px 5px 5px 5px #888888;padding:0.5%;">
<a href="../android">
<img src="http://empedure.com/products/media/images/icons/android_128.png" class="producttype" />
</a>
<a href="../iphone">
<img src="http://empedure.com/products/media/images/icons/iphone_128.png" class="producttype" />
</a> 
<a href="../windows">
<img src="http://empedure.com/products/media/images/icons/windows_128.png" class="producttype" />
</a>

以下是它的外观：

我希望它是这样的：

外部应为DIV1，

I0 =图片1左对齐

I1,I2,I3 =三个不同的图像，应该在DIV1的中心组合

我尝试div layer，但I0无法点击。

Answer 1

你在这里： http://jsfiddle.net/8u2Bp/1/

你必须用

设置父div

position:relative;
text-align:center;

然后在你想要的图像上留在左边

position:absolute;
left: 10px [distance you want it from the left border]

Answer 2

你可以创建一个包含1行和2或3列的简单表 然后将I0放在左侧单元格或任何您想要的位置并对齐它们 如你所愿：）

<table>
 <tr>
  <td><img src="I0"></td>
  <td><img ... /></td>
 </tr>
</table>

（您可以设置表格的宽度以更好地调整img的方向）