Question

对于某种菜单，我想要一个300像素宽的盒子，其中的项目与右边对齐。我想出了以下代码，它在IE和Chrome中运行得很好，但在FF中却没有：

<div style="width:300px;" align="left">
    <div align="right">
        <img  src="images/item1.png">     <br/>
        <img  src="images/item2.png">     <br/>
        <img  src="images/item3.png">     <br/>
        <img  src="images/item4.png">     <br/>
    </div>
</div>

更新：在FF中，图像位于屏幕的右侧，而不是从左侧300px右侧对齐。

更新2：解决方案似乎是文本对齐...

Answer 1

好的，经过大量尝试后，我自己找到了：text-align可以解决问题（虽然它在这里对齐图像）

  <div style="width:300px; text-align:right;">
    <img  src="images/item1.png">     <br/>
    <img  src="images/item2.png">     <br/>
    <img  src="images/item3.png">     <br/>
    <img  src="images/item4.png">     <br/>
  </div>

Answer 2

试试：

   <div style="width: 300px;">
     <div style="float: right;">
       <img src='images/item1.png' />
     </div>
    </div>

哦，而且，不要使用HTML对齐参数，使用样式。

Answer 3

请尝试使用此代码：

<div style="width=300px;">
<div style="float: right">
    <img  src="images/item1.png">     <br/>
    <img  src="images/item2.png">     <br/>
    <img  src="images/item3.png">     <br/>
    <img  src="images/item4.png">     <br/>
</div>
</div>

Answer 4

尝试此宽度：not width =

<div style="width:300px;">
    <div style="float: right">
        <img src="images/item1.png">
        <br />
        <img src="images/item2.png">
        <br />
        <img src="images/item3.png">
        <br />
        <img src="images/item4.png">
        <br />
    </div>
</div>

Answer 5

<div style="width:300px;">
<div style="float:right">
    <img  src="images/item1.png" alt="img"/>     <br/>
    <img  src="images/item1.png" alt="img"/>     <br/>
    <img  src="images/item1.png" alt="img"/>     <br/>
    <img  src="images/item1.png" alt="img"/>     <br/>
</div>
</div>

如何为firefox制作这个'div box'？

5 个答案: