跨浏览器页面顶部的三个同等徽标的解决方案

Question

我在我的网站有3个徽标。要求是：

• 第一个应该在左上方。
• 第二个应该在右上角。
• 三分之一应该在距离它们相等的两个徽标的中间。

我不是CSS专家，我尽力而为，但无济于事。我设法使这两个第一个徽标左右浮动，但是第三个，我使用margin和absolute position，这不是一个好的解决方案，因为我认为：在调整浏览器大小或更改设备或浏览器时，它有一个不好的位置。

我使用的代码：

<img src="images/logo2.png" width="150" height="215" style="float:right"> 
<img src="images/logo3.png" height="70" style="margin:10px 620px 10px 0; position: absolute"> 
<img src="images/logo1.png" width="133" height="235" style=" float:left;"> 

请帮我找到这个问题的解决方案，这将得到高度赞赏。

再次感谢。

Answer 1

尝试这种情况：

<div style="text-align: center;"> 
    <img src="images/logo2.png" width="150" height="215" style="float:right"> 
    <img src="images/logo3.png" height="70" > 
    <img src="images/logo1.png" width="133" height="235" style=" float:left;"> 
</div> 

Example Fiddle

这应该只要图像宽度的总和小于主体的宽度小工作。

否则，您应该使用图像宽度的百分比值，如完成here。