Question

我有一个SVG文件，每个形状都有两个div标签在我的SVG文件中。单击小框时会打开一个新页面和一个大框当点击时打开另一个页面我现在使用当我重新调整大小我的浏览器我的div移开了，没有响应，但使用插画家我使我的SVG文件响应，我如何使我的div 重新调整大小时响应的元素？有人可以帮我编码吗？这是我的代码

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled Document</title>
  <style>
    .gold1 {
      position: absolute;
      top: 9px;
      left: 10px;
      z-index: 1;
    }
    #small {
      height: 98px;
      width: 92px;
      float: left;
      position: absolute;
      right: 500px;
      top: 271px;
      left: 222px;
      z-index: 1;
    }
    #big {
      height: 168px;
      width: 140px;
      float: left;
      position: absolute;
      right: 700px;
      top: 271px;
      left: 397px;
      z-index: 1;
    }
  </style>
</head>

<body>
  <?xml version="1.0" encoding="utf-8" ?>
  <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 768" style="enable-background:new 0 0 1024 768;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        fill: #8C6239;
        stroke: #000000;
        stroke-miterlimit: 10;
      }
      .st1 {
        fill: #908FB2;
        stroke: #000000;
        stroke-miterlimit: 10;
      }
      .st2 {
        fill: #D3D2E0;
        stroke: #000000;
        stroke-miterlimit: 10;
      }
      .st3 {
        font-family: 'MyriadPro-Regular';
      }
      .st4 {
        font-size: 12px;
      }
    </style>
    <rect id="XMLID_1_" x="128.5" y="164.6" class="st0" width="808.5" height="492.7" />
    <path id="XMLID_2_" class="st1" d="M215.1,273.1h-37.8c-12.1,0-22-9.8-22-22v-31.7c0-12.1,9.8-22,22-22h37.8c12.1,0,22,9.8,22,22
	v31.7C237,263.3,227.2,273.1,215.1,273.1z" />
    <path id="XMLID_3_" class="st2" d="M381.6,336.5h-68.3c-11.8,0-21.3-9.6-21.3-21.3v-96.3c0-11.8,9.6-21.3,21.3-21.3h68.3
	c11.8,0,21.3,9.6,21.3,21.3v96.3C402.9,327,393.3,336.5,381.6,336.5z" />
    <text id="XMLID_4_" transform="matrix(1 0 0 1 185.8291 225.561)" class="st3 st4">A</text>
    <text id="XMLID_5_" transform="matrix(1 0 0 1 313.8779 242.6343)" class="st3 st4">B</text>
  </svg>

  <a href="small.html">
    <div id="small">
    </div>
  </a>
  <a href="big.html">
    <div id="big">
    </div>
  </a>
</body>

</html>

＆＃13;

Answer 1

我有点困惑于你是想让它的大小响应，还是它的位置响应。所以我会回答两个问题。

如果您想要调整尺寸，那么您需要更换“width：140px;”用它想要它占据的任何百分比的父元素。 I.E. “宽度：20％;”

它与定位非常相似，只是改变了几个单词。而不是“左：222px;”你会把它变成你希望它移动的百分比。 I.E“左：20％;”唯一需要注意的是百分比是基于元素的左上角而不是中间的。因此，如果您打算在将来检查中心元素，请选中this out

Answer 2

希望你正在寻找这个..仍然是你的问题应该更具体

<强> HTML

<div id="small">Small</div>
<div id="big">Big</div>

<强> CSS

html, body {
    height:100%;
}
div {
    max-width:100%;
    border:1px solid #dddddd;
    float:left;
    height:auto;
}
#small {
    width:30%;
    min-height:30%;
    background:yellow;
}
#big {
    width:60%;
    min-height:60%;
    background:greenyellow;
}

Fiddle Demo

如何使div元素响应？

2 个答案: