Question

#sponsors { 
  float: right; 
  display: inline; 
  width: 728px; 
  height: 100px; 
  margin: 60px 11px 0;
}

<div id="sponsors">
   <a href="#"><img src="images/sponsors/1.png"></a>
   <a href="#"><img src="images/sponsors/2.png"></a>
</div>

我无法将图像移动到div的右侧，但 div align =“right”有效。

如何使用css3将图像设置为右侧？

Answer 1

将display更改为block并添加text-align:right

#sponsors { 
  float: right; 
  display: block; /* or remove this line, as block is default for div */
  width: 728px; 
  height: 100px; 
  margin: 60px 11px 0;
  text-align: right;
}

显示inline对于width和height分离的元素没有多大意义。我假设您希望浏览器尊重您的width和height，因此display应为block，或者完全删除，因为它是div元素，暗示默认情况下为display:block。然后，您希望div中的元素与右侧对齐，您可以通过应用text-align来完成。

Answer 2

试试这个：

#sponsors a img {
  float:right;
}

目前您将赞助商div浮动到右侧，而不是赞助商div内的图像。定位图像以浮动它们，它应该适合你。

Answer 3

图像本身需要浮动，或者它们的父元素需要修改其文本对齐。

浮动：http://jsfiddle.net/MAz4Q/1/

#sponsors { 
  width: 728px; 
  height: 100px; 
  margin: 60px 11px 0;
}

#sponsors img {
    float: right;
}

对齐：http://jsfiddle.net/MAz4Q/2/

#sponsors { 
  width: 728px; 
  height: 100px; 
  margin: 60px 11px 0;
  text-align: right;
}

我可以使用右对齐将图像设置为右侧，但不能使用浮点数？

3 个答案: