Javascript 带有传单地图的基本CSS定位和带有React.js的HTML表格

我在将HTML表（制作成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>

.包装纸{
宽度：100%；
身高：100%；
}
.地图{
位置：绝对位置；
左：0；
右：0；
底部：0；
排名：0；
身高：100%；
宽度：75%；
浮动：左；
z指数：-1；
}
.桌子{
位置：相对位置；
身高：100%；
浮动：对；
宽度：25%；
z指数：0；
}

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

以下是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
  }
);

/*将进入main.jsx*/
var reactComponentMap=React.renderComponent(
,
document.getElementById（'map'），
函数（）{
//映射组件回调
}
);
var reactComponentTable=React.renderComponent(
,
document.getElementById（'table'），
函数（）{
//表组件回调
}
);

以下是我使用上述CSS代码制作时的当前输出：

---

你可以看到上面的桌子在地图上方。右边的空白边是桌子的25%个保留位置，但是它没有放在那里。地图只占屏幕的75%

这只是一个HTML/CSS问题。你混淆了类和ID。在HTML中使用id（id=“table”），在CSS文件中使用类（.table）

试试这个：

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

地图
桌子

谢谢你指出我愚蠢的错误。对于CSS中的类使用“.”和ID使用“#”，请使用正确的“选择器”。

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