我想用固定高度的子div扩展div的宽度

时间:2014-05-27 04:15:43

标签: css

HTML

<div class="container">
    <table>
        <tbody>
            <tr>
                <td>
                    <div>
                        <div>Hello</div>
                        <div>World of</div>
                        <div>CSS</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <div>Hello</div>
                        <div>World of</div>
                        <div>CSS</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.container {
    overflow-x:auto;
    width:100px;
    background-color:#D5D5D5;
    height:300px;

}

td > div {
    height:20px; /*fixed height*/
    background-color:white;
}
td > div > div {
    display:inline-block; /*set width by contents*/    
    border:1px solid black;
    float:left;
}

http://jsfiddle.net/2s2y5/1/

我想连续在td中创建div并在容器div中进行x滚动。 td中div的大小必须由其内容决定。可能吗? 如果我必须将表替换为div,那没关系。 谢谢你的阅读!

1 个答案:

答案 0 :(得分:1)

默认情况下,表格标签设置为适合页面。如果你为表设置宽度,那么可以预期x滚动可以工作。我在jsfiddle做了一些改变。希望这是你在干杯中所要求的。

http://jsfiddle.net/2wvUJ/