html - 以响应方式定位嵌套 div

Question

我有一些嵌套的 div 需要以响应方式彼此相邻放置。这是我的 html:

<div class="map-tool">
  <div id="map"></div>
  <div id="ember473" class="draggableDropzone1 ember-view draggableDropzone deactivated">
    <div class="map-view  kinetic-active" id="wrapper" style="cursor: move;">
      <div id="ember482" class="ember-view">
        <div class="" style="position:relative;">
          <img id="dragMap" class="" src="*********">
        </div>
      </div>
    </div>
  </div>
  <div id="ember483" class="draggableDropzone1 ember-view draggableDropzone deactivated">
    <div id="g-map-object" class="map-view ">
    </div>
  </div>
  <div id="ember484" class="draggableDropzone2 ember-view draggableDropzone deactivated">
    <div class="legend-view ">
      <div id="ember493" class="ember-view">
        <div class="border-below">
          <p>Selected map:</p>
          <select id="ember502" tabindex="0" class="ember-view x-select">
            <option id="ember512" value="[object Object]" class="ember-view x-option">Tomorrowland floorplan</option>
          </select>
        </div>
      </div>
      <div class="hotspots-view ">
        <p class="places-available ">Places available</p>
        <div class="categories-buttons ">
          <div id="ember525" class="ember-view">
            <button class="cat-button" data-ember-action="529">Amusement</button>
            <button class="cat-button" data-ember-action="532">Stages</button>
            <button class="cat-button" data-ember-action="533">Tastes of the World</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <p class="hiddenHotspot "><i class="fa fa-map-marker "></i>
  </p>
</div>

类 'legend-view' 需要一直定位到右边，并且固定宽度为 200。“ map View ”类位于图例 View 的左侧，并占用所有剩余的宽度空间。

目前我正在使用宽度 75% 和宽度 25% 但这不是最佳选择，因为我需要图例 View 的固定宽度。

View 由 ember-views 组成，因为这是我正在使用的框架。

Answer 1

为 HTML 添加了一些样式。 .legend-view 应保留 200px，而 .map-view 将响应剩余空间。这在 HTML 的样式部分中列出。

为了向右浮动，必须在正文中切换 div 的顺序。 “ map View ”被移动到“图例 View ”下方，所以 float :右；会将“legend-view”放在右边，在“map-view”之前。

**编辑:我添加了背景色来说明 div 的定位。

<style>
  .legend-view {
    float: right;
    width: 200px;
    postion: relative;
    background-color: red;
  }

  .map-view {
    float: right;
    postion: relative;
    background-color: blue;
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
  }

</style>

<div class="map-tool">



  <div id="ember484" class="draggableDropzone2 ember-view draggableDropzone deactivated">
    <div class="legend-view ">
      <div id="ember493" class="ember-view">
        <div class="border-below">
          <p>Selected map:</p>
          <select id="ember502" tabindex="0" class="ember-view x-select">
            <option id="ember512" value="[object Object]" class="ember-view x-option">Tomorrowland floorplan</option>
          </select>
        </div>
      </div>

      <div class="hotspots-view ">
        <p class="places-available ">Places available</p>
        <div class="categories-buttons ">
          <div id="ember525" class="ember-view">
            <button class="cat-button" data-ember-action="529">Amusement</button>
            <button class="cat-button" data-ember-action="532">Stages</button>
            <button class="cat-button" data-ember-action="533">Tastes of the World</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="map"></div>

  <div id="ember473" class="draggableDropzone1 ember-view draggableDropzone deactivated">
    <div class="map-view  kinetic-active" id="wrapper" style="cursor: move;">
      <div id="ember482" class="ember-view">
        <div class="" style="position:relative;">
          <img id="dragMap" class="" src="*********">
        </div>
      </div>
    </div>
  </div>
  <div id="ember483" class="draggableDropzone1 ember-view draggableDropzone deactivated">
    <div id="g-map-object" class="map-view ">
    </div>
  </div>

  <p class="hiddenHotspot "><i class="fa fa-map-marker "></i>
  </p>
</div>