代码之家 › 专栏 › 技术社区 › 99miles

如何根据内容大小强制水平滚动

css html

99miles · 技术社区 · 15 年前

如果需要的话,我希望有一个水平滚动条,通过让‘child’div按大小并排添加,而不是在父级不够宽时被推到下一行。

我的代码在下面。如果你把.mid设为width:1000px,你就会知道我要的是什么,只是我只希望它和动态生成的子对象一样宽。

<html>
<head>

    <style type="text/css">

        .parent {
            width: 400px;
            background-color: #666;
            overflow:scroll;  /* cater to the older browsers */
            overflow-y:hidden; /* Hide vertical*/
        }

        .mid {
            background-color: red;
        }

        .child {
            display:inline-block;
            background-color: #ccc;
            border: 1px solid black;
            width: 190px;
        }

    </style>

</head>
<body>
    <div class="parent">
        <div class="mid">
            <div class="child">
                I am a child.
            </div>
            <div class="child">
                I am a child.
            </div>
            <div class="child">
                I am a child.
            </div>  
        </div>
    </div>

</body>
</html>

3 回复 | 直到 15 年前

Moin Zaman 15 年前

人们以前来过这里,找到了最好/最简单的方法。看这里:

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

Yi Jiang G-Man 15 年前

见鬼,还是回答这个吧。您将需要Javascript来实现这一点,但是考虑到您已经使用Javascript来动态生成子元素,这应该不是什么问题。

假设您使用的是jQuery,则在生成元素后添加以下两行:

var child = $('child');
$('.mid').width(child.length * child.outerWidth(true));

很抱歉沟通不畅

然而,使用它会产生另一个问题。 display: inline-block div ,因此jQuery无法获得正确的宽度。如果你使用 float: left 相反,尽管如此。

Kieran 15 年前

overflow:auto

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前