Question

在IE8中，我有一个带有3个子表的父div。我希望表彼此相邻，并且父div在x轴上有溢出，以便用户可以在父div上滚动以查看下一个表。 HTML：

<div id="q_box">'
    <table>
        <tr>
            <td>Title</td>
        </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
    <table>         
    <table>
        <tr>
            <td>Title</td>
        </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
    <table> 
    <table>
        <tr>
            <td>Title</td>
        </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
        <tr>
            <td>data</td>
         </tr>
    <table>

和CSS：

#q_box{
    position:relative;
    height:120px;width:100px;
    background:red;
    float:right;
    overflow-x:auto;
}
#q_box table{
    float:left;
    border:1px solid #000000;
}

jsfiddle上的代码： http://jsfiddle.net/tech_noob/aYAwe/

Answer 1

解决方案是不使用float left css而是使用display inline block。然后，您可以将白色空间nowrap应用于父div。

#q_box{
    position:relative;
    height:120px;width:100px;
    background:red;
    float:right;
    overflow-x:auto;
    white-space: nowrap;
}
#q_box table{
    display: inline-block;
    border:1px solid #000000;
}

我已更新了您fiddle。

请注意，此内联块在IE 7中不起作用。您可以使用display：inline并为元素指定hasLayout，例如zoom：1;

Answer 2

一种方法是添加另一个div。您的顶级容器设置宽度和溢出，就像您使用#q_box一样。下一个div（新的）有一个超宽的宽度，以容纳浮动到左侧的表：

#wrap {
  width: 1000em;
}

更新了小提琴：http://jsfiddle.net/aYAwe/1/

IE8表浮点和父Div

2 个答案: