CSS樣式安排的DIV

-2

我有幾個DIV，我想安排如下所示Div Layout design CSS樣式安排的DIV

下面是我嘗試使用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中實現圖像中提到的佈局？

在此先感謝。

來源

2012-06-13 Sanjay Sutar

你有使用JavaScript圖表考慮？ http://www.highcharts.com/demo/line-basic – thirtydot

不是一個真正的問題，只是你想讓我們爲你做你的工作。你有特定的問題嗎？ –

Google是你的朋友：http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and-techniques/ – CJM

我只是增加了一些更多的風格來命名的div，檢查

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

來源

2012-06-13 11:25:49

如果沒有與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標題的垂直文本，您可能需要進行某種轉換。當然，你有適當的類

來源

2012-06-13 10:40:59 jakee

感謝CSS。但我需要的不是絕對的位置。我正在開發一個Asp.net MVC項目。我有一個DIV，其中包括標題和圖表的所有DIV。其次，我有多個圖表，我在一個for循環中渲染。 –

您可以擁有一個固定尺寸的相對定位的div，並且其內容完全位於其內。絕對不排除動態渲染。只是我的5c – jakee

CSS樣式安排的DIV

回答

相關問題