2

我有一个正在处理的项目，我们希望多个面板彼此相邻，如果所有面板不能一次显示在屏幕上（典型情况），则显示一个水平滚动条。我花了一天的时间尝试用一些简单的 HTML 和 CSS 制作原型，但我无法 100% 做到这一点。我在 IE 9 和 Chrome 29.x 中都试过这个。两者渲染相同。

基本上，我无法让不可见的面板不换行到下一个“行”。但是，（在下面的标记的情况下），面板 5 不可见，因为它已经包裹起来。下面的 HTML 是我所能得到的，但有一些重要的区别：

  1. 最终，我不想为#scrollBox 指定宽度（当前设置为 1200px）。我们希望保持这个开放式结束，以便该区域始终随着用户的浏览器窗口跟踪和增长。
  2. 我不喜欢使用或标签，它们只是我所知道的并且在我的整体设计中工作。
  3. 是的，目前 fieldset.firstPanel 和 fieldset.otherPanel 是相同的，将来可能会改变。与 div.firstPanel 和 div.otherPanel 相同。

任何帮助将不胜感激。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Horizontal Scrolling Panels</title>
    <style type="text/css">
        fieldset.firstPanel {
            height: 200px;
            width: 300px;
            margin-right: 10px;
        }
        fieldset.otherPanel {
            height: 200px;
            width: 300px;
            margin-right: 10px;
        }
        div.firstPanel {
            height: 200px;
            width: 300px;
            float: left;
            display:inline-block;
        }
        div.otherPanel {
            height: 200px;
            width: 300px;
            float: left;
            display:inline-block;
        }
        #scrollBox {
            width: 1200px;
            height: 220px;
            overflow-x: auto;
            overflow-y: hidden;
            -ms-overflow-x: auto;
            -ms-overflow-y: hidden;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
        <div>
            <div id="scrollBox">
                <div class="firstPanel">
                    <fieldset class="firstPanel">
                        <legend>Panel 1</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 2</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 3</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 4</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 5</legend>
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
4

1 回答 1

2

基本样式将display:inline-block在元素（无浮动）和white-space: nowrap;容器上：

演示小提琴

    #scrollBox {
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-x: auto;
        -ms-overflow-y: hidden;
        white-space: nowrap;
    }
    #scrollBox > div {
        display: inline-block;
        margin-right: 10px;
    }
    #scrollBox > div fieldset {
        height: 200px;
        width: 300px;
    }
于 2013-08-27T21:37:38.987 回答