包含浮动子div的父div中的水平滚动 [英] Horizontal scroll in a parent div containing floated child divs

问题描述

我有以下代码：

HTML

<div id="parent">
    <div class="child">2001</div>
    <div class="child">2O02</div>
    <div class="child">2003</div>
    <div class="child">2004</div>
    <div class="child">2005</div>
</div>

CSS

#parent{
width:100%;
overflow:auto;
}

.Child{
float:left;
width:20px;
}

子内容总是溢出，这是好的。但我想能够在父div中水平滚动，以查看最后一个子div。

The child content is always overflowing, and this is good. But I want to be able to scroll horizontally in the parent div, to see the last child divs.

以下是结果的截图：

截图

如何做到这一点是水平滚动？

How can I do that to make is scroll horizontally?

推荐答案

如果你想在一行中的所有子元素，你必须添加第二个父DIV并设置它的宽度单行中所有子级的宽度）：

If you want all childs in a single row, you have to add second "parent" DIV and set it's width (combined widths of all children for a single row):

HTML：

<div id="parent">
    <div id="parent2">
        <div class="child">2001</div>
        <div class="child">2002</div>
        <div class="child">2003</div>
        <div class="child">2004</div>
        <div class="child">2005</div>
    </div>
</div>

CSS：

#parent{
    width:100%;
    overflow:auto;
}


#parent2{
    width:1000px;
}

.child{
    float:left;
    width:200px;
}

这篇关于包含浮动子div的父div中的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！