使用 Leaflet Map 和 HTML Table 使用 React.js 进行基本 CSS 定位

Question

我在将 HTML Table（制作成 React 组件）置于屏幕右侧时遇到问题。主要问题是地图必须有一个绝对位置。我通常不会用 CSS 工作太多，当我做的时候，一切都是相对的。我很确定我只是在 CSS 中搞砸了一些基本的东西，或者它可能是 React.js 的东西。这是 CSS 样式：

 <!-- styling - put in another file later -->
  <style type="text/css">
    .wrapper {
      width: 100%;
      height: 100%;
    }
    .map {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      height: 100%;
      width: 75%;
      float: left;
      z-index: -1;
    }
    .table {
      position: relative;
      height: 100%;
      float: right;
      width: 25%;
      z-index: 0;
    }
  </style>

以及附加到 React 组件的 div 的基本主体布局（包装器除外，它没有 React 组件）。

  <div id='wrapper'>
    <div id='map'></div>
    <div id='table'></div>
  </div>

这是供参考的反应代码：

/* will go in main.jsx */
var reactComponentMap = React.renderComponent(
  <Map data={testJSON}/>,
  document.getElementById('map'),
  function() {
    // Map Component Callback
  }
);

var reactComponentTable = React.renderComponent(
  <Table />,
  document.getElementById('table'),
  function() {
    //Table Component Callback
  }
);

这是我使用上述 CSS 代码生成的当前输出：

你可以看到上面的table是地图。右边的空白部分是为 table 保留的 25%，但它并没有将它放在那里。地图只占屏幕的 75%。

Answer 1

这只是一个 HTML/CSS 问题。你混淆了类和 ID。在您的 HTML 中，您使用 ID (id="table")，在您的 CSS-File 中，您使用类 (.table)。

试试这个：

<div class="wrapper">
    <div class="map">Map</div>
    <div class="table">Table</div>
</div>

使用 Leaflet Map 和 HTML Table 使用 React.js 进行基本 CSS 定位

Basic CSS Positioning with Leaflet Map and HTML Table with React.js

html

javascript

css

reactjs