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>

Class＆＃39; legend-view＆＃39;需要一直定位到右边，并且固定宽度为200。课程＆＃39;地图视图＆＃39;位于图例视图的左侧，并占据所有剩余的宽度空间。

目前我的宽度为75％，宽度为25％，但这并不是最佳选择，因为我需要图例视图的固定宽度。

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

Answer 1

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

为了向右浮动，必须在体内切换div的顺序。 “地图视图”移动到“图例 - 视图”下方，因此浮动：右;将“传奇视图放在右边，然后”地图视图“。

**编辑：我添加了背景颜色来说明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>

以响应的方式定位嵌套的div

1 个答案: