-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 回答