Question

对于CSS来说，我是新手。我的总体目标是将我在桌面上显示数据的小型Web应用程序转换为使用CSS。

应用程序显示的内容的描述是在左侧窗口中有一个员工姓名列表，右侧是员工工作的每一天的单元格，该单元格跨越用户可选择的时间段。

在下面的代码中，我无法让单元格元素溢出，以便用户可以向右滚动，而不是单元格溢出。

有没有办法可以让溢出水平而不是垂直工作，所以我可以左右滚动查看所有单元格，而不是现在正在做什么，这是垂直创建滚动条？

非常感谢，如果有人能提供帮助 - 这让我感到沮丧！

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="header">Header</div>
    <div id="centreposition">
        <div id="centrecontent">
        <?php 
            for ($counter = 0; $counter < 100; $counter++)
            {
                ?> 
                <div id="cell">AB</div> 
                <?php      
            }
        ?>
        </div>
    </div>

    <div id="footer">Footer.</div>

 <div id="left">Left <div>

</body>
</html>

CSS：

body {
    margin: 0px;
}

#header {
    height: 100px;
        background-color: #9FF300;
}

#centreposition {
        width: 600px;
    padding-right: 10px;
    padding-left: 10%;
}

#centrecontent {
    z-index: 100;
    min-width: 1px;
        height: 40px;
    border: 1px solid #999999;
    padding: 4px;
        background-color: #FFFF00;
        overflow-x: scroll; 
}


#footer {
    padding-left: 175px;
    background-color: #20F3F7;
}

#left {
    width: 10%;
    position: absolute;
    top: 100px;
    left: 0px;
    padding: 10px 0px 10px 6px;
}



#right {
    width: 130px;
    position: absolute;
    top: 100px;
    right: 0px;
    height: 200px;
}

#cell {
    float: left;
    width: 24px;
    height: 16px;
    margin: 1px;
    background-color: #aaccdd;
    font-size: 10px;
    border-style: solid;
    border-left-width: 1px;
    border-color: #555555;
}

Answer 1

两个建议：

你基本上要求基于表格的布局，所以你可以这样做好好使用HTML表格。
每个单元格都有固定的宽度，您的PHP代码应该知道它们中有多少要创建，所以可以设置宽度容器元素（#centrecontent here）足够宽以容纳它们所有

此外，元素ID在HTML文档中应该是唯一的，因此使用#cell创建100个元素，因为它们的ID不正确 - 您应该使用CSS类名称。

Answer 2

您可以将所有单元格放在另一个div中，并将div设置为特定宽度。

jsfiddle

如何在CSS中获得水平溢出？

2 个答案: