我不明白为什么左栏(在图像中突出显示)和标题之间有空白。只有当我用图表填充中间列时才会发生这种情况。看着 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">
最佳答案
问题是大图表会拖小图表，因为您没有垂直对齐规则。我在你的代码中添加了一个大占位符图表(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; }
关于javascript - 使用 d3.js 图表填充页面时的 CSS/对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15738965/