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

2 つの提案:

  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 に答える