跨浏览器的解决方案，三个等距离的标志在页面的顶部

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>

例子小提琴

只要图像宽度之和小于正文宽度，该方法就可以工作。

否则你应该使用百分比值的图像宽度，就像这里所做的。