在IE中包含具有可变宽度的父元素的右侧元素<= 7

我有一个没有设置宽度的容器div，它包含一个可变宽度的表格，并且还有一个表格下方的按钮。我想让这个按钮漂浮在右边，使其右边缘与桌子右边缘对齐。做下面的事情似乎在所有浏览器中都能正常工作，但IE < = 7。这是如何正确完成的？在IE中包含具有可变宽度的父元素的右侧元素<= 7

<head> 
    <style> 
#tableContainer { 
    float: left; 
} 
#btn { 
    float: right; 
} 

    </style> 
</head> 
    <body> 
     <div id="tableContainer"> 
      <table> 
       <tr> 
        <td>a b c</td> 
        <td>a b c</td> 
        <td>a b c</td> 
        <td>a b c</td> 
       </tr> 
      </table> 
      <button id="btn">buttontext</button> 
     </div> 
    </body> 
</html>

这里有我想要的一个例证：

__________________ 
|    | 
|  table | 
|________________| 
      |btn| 
      ‾‾‾‾‾

来源

2013-04-05 Clox

好吧，一个解决方案，我终于摸索出如下：

<head> 
    <style> 
#tableContainer { 
    float: left; 
} 
#btncontainer { 
    text-align: right; 
} 

    </style> 
</head> 
    <body> 
     <div id="tableContainer"> 
      <table> 
       <tr> 
        <td>a b c</td> 
        <td>a b c</td> 
        <td>a b c</td> 
        <td>a b c</td> 
       </tr> 
      </table> 
    <div id="btncontainer"> 
       <button>buttontext</button> 
    </div> 
     </div> 
    </body> 
</html>

我们做了什么这里是创建一个按钮，容器，并设置“文本 - 对齐：正确“就可以了。或者，我们可以跳过btn容器，并在表容器中放置文本对齐，假设没有其他元素需要放在左边（这不会影响表的放置方式，只要它比按钮的宽度更宽我的情况。

对我来说，不使用文本对齐到对齐虽然按钮感到很不合逻辑的。对任何意见？

来源

2013-04-06 13:07:03 Clox

你可以把按钮出来的div？那应该可以解决你的问题。

别的，就#tableContainer table（不推荐）

你也可以换你的表到另一个DIV添加float:left，并漂浮该div向左

也，你有表之前动按钮

来源

2013-04-05 05:04:48

不知道你让我对的，但我已经添加插图的问题等等你可以看到我在做什么 – Clox 2013-04-05 05:29:23

我希望这是你的意思..

#tableContainer { 
     float:left; 
    } 
    #btn { 
     position:relative; 
     left:0; 
     right:0; 
     float:right; 
    }

Working Fiddle

否则

#tableContainer { 
     float:left; 
     display: inline; 
    } 
    #btn { 
     float:right; 
     display: inline; 
    }

来源

2013-04-05 05:18:25

不，不是，对不起，看起来我没有说清楚我已经添加了一个我想要的原始问题的插图 – Clox 2013-04-05 05:28:46

@Clox检查我更新的帖子。我无法在IE7中测试，也可以使用'display：inline'和'float'属性进行检查。 – 2013-04-05 05:37:14

我感谢你的帮助。添加显示：内嵌到像这样的元素没有任何区别虽然= /按钮始终在IE7屏幕的最右侧结束。我认为这会很简单，我只是错过了一些明显的东西。仍似乎无法正常工作= / – Clox 2013-04-06 12:45:24

在IE中包含具有可变宽度的父元素的右侧元素<= 7

回答

相关问题