0

当谈到 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;
}
4

2 回答 2

0

两个建议：

  1. 您实际上是在要求基于表格的布局，因此您不妨使用 HTML 表格。
  2. 每个单元格都有固定的宽度，您的 PHP 代码应该知道要创建多少个单元格，因此您可以将容器元素的宽度（此处为#centrecontent）设置为足够宽以包含所有单元格。

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

于 2013-03-29T19:54:19.633 回答
0

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

jsfiddle

于 2013-03-29T19:54:43.183 回答