javascript - 使用 React.js 的传单 map 和 HTML 表格的基本 CSS 定位

Question

我在将 HTML 表格(制作成 react 组件)放在屏幕右侧时遇到问题。主要问题是 map 必须有一个绝对位置。我通常不怎么使用 CSS，当我使用 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>

这是供引用的 react 代码:

/* 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 代码生成的当前输出:

您可以看到表格上方是 map 。右边空白的一面是为表格保留的 25%，但它并没有把它放在那里。 map 只占屏幕的 75%。

Answer 1

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

试试这个:

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