0

我不明白为什么左列（在图像中突出显示）和标题之间有空白。这只发生在我用图表填充中间列时。看着 chrome 开发人员，我不明白我错过了什么。这是代码片段。我尝试在左列图像的底部添加边距和填充，但这没有帮助。我错过了什么？

<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

4

1 回答 1

2

问题是大图表会拖小图表，因为您没有垂直对齐规则。我在您的代码中添加了一个大占位符图表 (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-01T22:23:40.987 回答