Html CSS和引导的对齐问题

我的传单地图覆盖了地图的标题，应该就在地图的正上方。我使用CSS和引导来对齐页面元素。如图所示：代码如下：

  <style type="text/css">
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
width:97%; /* you can use % */
height: auto;
}
div#location {
  width:600px;
  height:400px;
}

div#datatable {height:700px; overflow-y:scroll; width: 425px word-wrap: break-word;}
td.dc-table-label {display:none;}
span.dc-data-count {font-size:.5em;}
span.dc-data-count {font-weight: normal;}
table#media-table {
    background-color: black;
    color:white;
    padding: 0;
}

---

这张地图应该与“电影带”的顶部对齐，它的标题是“位置”，就像“媒体”。这将允许在每个元素的顶部添加摘要统计信息。

尽管这在结构上并不理想，但我会利用跨度向下推地图元素的起点

<div class="row">
    <div class="col-md-12">
        <strong><span id="datatable"></span>Media</strong>
    </div>
    <div class="col-md-4">
        <table class="table table-hover" id="media-table"></table>
    </div>
    <div class="col-md-6" id="location">
        <strong><span id="map"></span>Location</strong>
    </div>
</div>

媒体
位置
dc.flipal.js将接管其构造函数中给出的整个
，所以只需将标题移出div，对吗

因为这意味着映射没有占用整个引导列，所以我们需要将它放在它自己的子div中

<div class="row">
    <div class="col-md-4">
      <strong><span id="datatable"></span>Media</strong>
      <table class="table table-hover" id="media-table"></table>
    </div>
    <div class="col-md-6" id="location-column">
      <strong><span id="map"></span>Location</strong>
      <div id="location">
    </div>
</div>

可能是dc.js相对于那些额外的元素表现得比dc.laople.js更好，也可能是dc.js有默认的边距，而dc.laople.js。
试着用
边距顶部向下移动它。
。我刚刚试着添加：
div#location{边距顶部：20；宽度：600px；高度：400px；}
并且得到了相同的结果。标题应该在哪里？如果添加此样式是否有帮助
#map{display:block；}
添加
#map{display:block；}
没有帮助。好吧，这将地图向下推到了它应该的位置，但标题仍然在后面（我可以看到它在地图覆盖它之前先加载）。@mutanthumb我明白了，真的，这应该足够工作了，但我必须现场观看，以评估cssI。我将尝试让Plunk工作，以便您可以看到它的运行，现在我只是让它从我的笔记本电脑上运行。我不确定为什么我的图像和地图没有进入Plunk，但它在这里：
<div class="row">
    <div class="col-md-12">
        <strong><span id="datatable"></span>Media</strong>
    </div>
    <div class="col-md-4">
        <table class="table table-hover" id="media-table"></table>
    </div>
    <div class="col-md-6" id="location">
        <strong><span id="map"></span>Location</strong>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
      <strong><span id="datatable"></span>Media</strong>
      <table class="table table-hover" id="media-table"></table>
    </div>
    <div class="col-md-6" id="location-column">
      <strong><span id="map"></span>Location</strong>
      <div id="location">
    </div>
</div>

map.margins({top: 100, left: 0, right: 0, bottom: 0}); // or whatever you need