在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

回答

相關問題