Question

我有几个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中提到的问题吗？

提前致谢。

Answer 1

如果您对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

Answer 2

我刚添加了一些样式，请检查

<!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>

Screen shot of your edited code

用于排列DIV的CSS样式

2 个答案: