-2

ここに示すように配置したいDIVがいくつかありますDiv Layout design

以下は、CSS を使用してレイアウトを実現しようとした HTML です。

<body>
<div class="page">

<div>

        <div style="margin: 2px 0 2px 0px; text-align: center; font-size: large">
            <span>Chart Title</span>
        </div>

        <div style="float: left;display:block;">
            <span>Y-Axis Title</span>
        </div>


        <div id="Chart1">
        <!--Chart would be displayed here-->
        </div>

        <div style="clear:both; margin: 2px 0 2px 0px; text-align: center; ">
            <span>X-Axis Title</span>
        </div>

</div>

</div>

画像に記載されているレイアウトを達成するためにCSSで誰かが私を助けることができますか??

前もって感謝します。

4

2 に答える 2

0

問題がなければposition: absolute、これでうまくいくはずです：

#Chart1, .chart-title, y-title, x-title {
  position: absolute;
}

.chart-title {
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  width: 200px;
  margin: 0 auto;
}

.x-title {
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  width: 200px;
  margin: 0 auto;
}

.y-title {
  top: 0;
  bottom: 0;
  left: 0;
  height: 200px;
  width: 50px;
  margin: auto 0;
}

#Chart1 {
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 0;
}

これにより、div レイアウトが得られます。y-title の縦書きテキストについては、何らかの変換を行いたいと思うかもしれません。もちろん、適切なクラスでdivに名前を付ける必要があります

于 2012-06-13T10:40:59.370 に答える
0

さらにいくつかのスタイルを追加しました。チェックしてください

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class="page">

<div>

        <div style="margin: 2px 0 2px 0px; text-align: center; font-size: large; width:100%;display:block;">
            <span>Chart Title</span>
        </div>

        <div style="float: left;display:block;height:400px; width:19%;">
            <span>Y-Axis Title</span>
        </div>


        <div id="Chart1" style="flot:left;display:block; height:400px; width:100%;">
        Chart would be displayed here
        </div>

        <div style="clear:both; margin: 2px 0 2px 0px; text-align: center;display:block;  width:100%;">
            <span>X-Axis Title</span>
        </div>

</div>

</div>
</body>
</html>

編集したコードのスクリーン ショット

于 2012-06-13T11:25:49.243 に答える