html - HTML/CSS 嵌套 div 与滚动条向左浮动

Question

我想用一个固定高度和宽度的 div 做一个简单的效果，它包含一组可以从左到右滚动的 div。

这是代码，但由于某种原因孩子们不想漂浮

.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.a > div​ {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

http://jsfiddle.net/SZzwP/

Answer 1

您不必（也不应该）更改您的 HTML。

只是white-space:nowrap用来避免断线

.a{
    width:200px;
    overflow-x:scroll;
    border:3px solid red;
    white-space:nowrap;
}
.a > div {
    width:170px; height:170px;
    display:inline-block;
    background:#eee;
    border:1px dotted #ddd;
}

在这里看到它：http: //jsfiddle.net/5Rz98/3/

Answer 2

Basically, you want a div inside of the container with a width that can accommodate the two div's side by side. Without doing this, you're trying to float 2 div's with a combined width of over 200px (the container).

---

HTML

<div class="a">
    <div class="inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS

.a{
    width:200px; 
    height:200px; 
    overflow-x:scroll; 
    border:3px solid red;
}

.inner{
    width:344px;
}

.inner div{
    width:170px; 
    height:170px; 
    float:left; 
    background:#eee; 
    border:1px dotted #ddd;
}​

http://jsfiddle.net/charlescarver/a4T8f/1/

Answer 3

你给每个孩子一个宽度170px，但父母只是200px。请将孩子的宽度更改为小于50px：

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:45px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

此外，让overflow-x: auto最初的水平滚动不显示。

如果是滑块，您需要使用另一个标记：

<div class="a">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS：

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:700px; height:170px;}
.a > div > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

小提琴：http: //jsfiddle.net/fPeUg/

Answer 4

You need another nest div inside .a with a width long enough for all the inner divs to float in, like this:

<div class="a">
    <div class="b">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    </div>
</div>
​.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.b {width:800px}
.b > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

​</p>