使用d3.js圖表填充頁面時的CSS /對齊問題

我不明白爲什麼左列（圖像中的高亮）和標題之間有空白空間。這隻發生在我用圖表填充中間列時。看着鉻開發人員，我不明白我缺少什麼。這是代碼片段。我試圖在左欄的圖像底部添加邊距和填充，但這並沒有幫助。我錯過了什麼？使用d3.js圖表填充頁面時的CSS /對齊問題

<body style="padding-left: 5px;"> 
<div id="header" style="width: 960px; height: 100px; background-color: #F5F5F5"> 
    <p>Bubble Inc</p> 
</div> 
<div id="container" style="width: 1100px; height: 1000px""> 
    <div id="leftCol" style="width: 225px; display: inline-block; margin-bottom: 50px; padding-bottom: 30px;"></div> 
    <div id="midCol" style="width: 600px; display: inline-block;"></div> 
    <div id="rightCol" style="width: 225px; display: inline-block;"></div> 
</div> 
<script type="text/javascript">

CSS & D3.js

來源

2013-04-01 TastyCode

你究竟想要做什麼？ – XTGX

你需要所有這三個'divs'在同一行嗎？ –

@XTG，我希望左側和右側列的圖像放置得更高。當我添加填充底部時，它不會移動它。 – TastyCode

的問題是，大圖表拖動小了，因爲你沒有垂直對齊規則。我添加了一個大的地方架圖（ID：bigContent）到您的代碼顯示效果：

<style> 
    #leftCol { background-color: red } 
    #rightCol { background-color: green } 
    #midCol { background-color: blue } 
    #bigContent { height: 200px;} 
</style> 
<div id="header" style="width: 960px; height: 100px; background-color: yellow"><p>Bubble Inc</p></div> 
<div id="container" style="width: 1100px; height: 1000px"> 
    <div id="leftCol" style="width: 225px; display: inline-block;">A</div> 
    <div id="midCol" style="width: 600px; display: inline-block;"> 
     <div id="bigContent">Biiig Content</div> 
    </div> 
    <div id="rightCol" style="width: 225px; display: inline-block;">C</div> 
</div>

可以加入垂直排列規則的style部分解決問題。

#container>div { vertical-align: top; }

來源

2013-04-01 22:23:40 Juve

使用d3.js圖表​​填充頁面時的CSS /對齊問題

回答

相關問題

使用d3.js圖表填充頁面時的CSS /對齊問題