Question

您好我正在使用SVG图像，我在<a>内有一个div元素，后者又调用JavaScript。现在，当我重新调整浏览器大小时，我的div元素没有响应。如何使其响应？

有人可以帮我处理代码吗？

#add {
  background-color: #0099FF;
  line-height: 30%;
  height: 19%;
  width: 114px;
  float: left;
  position: absolute;
  right: 500px;
  top: 156px;
  left: 16px;
  z-index: 1;
}

<?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="114 109 841 576" enable-background="new 114 109 841 576" xml:space="preserve">
<g id="Layer_x0020_1">
	
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="11055.7793" y1="-20834.7734" x2="11055.7793" y2="-5446.7729" gradientTransform="matrix(0.0283 0 0 -0.0283 221.5371 24.5107)">
		<stop  offset="0" style="stop-color:#CABCA0"/>
		<stop  offset="0.3804" style="stop-color:#D9CEB8"/>
		<stop  offset="0.749" style="stop-color:#E5DDD1"/>
		<stop  offset="0.8784" style="stop-color:#D9CEBA"/>
		<stop  offset="1" style="stop-color:#CDBEA3"/>
	</linearGradient>
	<path fill="url(#SVGID_1_)" d="M206.72,178.905c-3.968,0-7.2,3.231-7.2,7.2l0,0v42.774v386.215h663.61c3.968,0,7.2-3.231,7.2-7.2
		l0,0V236.079c0-3.968-3.231-7.2-7.2-7.2l0,0H255.702c-3.968,0-7.2-3.231-7.2-7.2l0,0v-35.574c0-3.968-3.231-7.2-7.2-7.2l0,0H206.72
		z"/>
	<g id="_763405264">
		<path fill="#252422" d="M239.46,204.133c0,0.283-0.227,0.51-0.51,0.51h-0.879v-14.797h0.879c0.283,0,0.51,0.227,0.51,0.51V204.133
			z M230.531,204.133v-13.776c0-0.283,0.227-0.51,0.51-0.51h5.442v14.797h-5.442C230.757,204.644,230.531,204.417,230.531,204.133z
			 M238.949,188.685h-7.909c-0.907,0-1.672,0.737-1.672,1.672v13.776c0,0.935,0.737,1.672,1.672,1.672h7.909
			c0.935,0,1.672-0.737,1.672-1.672v-13.776C240.622,189.422,239.885,188.685,238.949,188.685z"/>
		<path fill="#252422" d="M229.142,194.694c0,0.595-0.482,1.077-1.077,1.077h-13.776c-0.595,0-1.077-0.482-1.077-1.077v-8.617
			c0-0.595,0.482-1.077,1.077-1.077h13.776c0.595,0,1.077,0.482,1.077,1.077V194.694z M229.142,201.327
			c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288
			c0.142,0,0.255,0.113,0.255,0.255V201.327z M229.142,205.721c0,0.142-0.113,0.255-0.255,0.255h-3.288
			c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V205.721z
			 M229.142,210.114c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069
			c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V210.114z M223.076,201.327
			c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288
			c0.142,0,0.255,0.113,0.255,0.255V201.327z M223.076,205.721c0,0.142-0.113,0.255-0.255,0.255h-3.288
			c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V205.721z
			 M223.076,210.114c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069
			c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V210.114z M217.01,201.327
			c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288
			c0.142,0,0.255,0.113,0.255,0.255V201.327z M217.01,205.721c0,0.142-0.113,0.255-0.255,0.255h-3.288
			c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V205.721z
			 M217.01,210.114c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069
			c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V210.114z M229.198,182.902h-16.072
			c-1.134,0-2.041,0.907-2.041,2.041v25.653c0,1.134,0.907,2.041,2.041,2.041h16.072c1.134,0,2.041-0.907,2.041-2.041v-25.653
			C231.239,183.809,230.332,182.902,229.198,182.902z"/>
		<path fill="#252422" d="M233.904,199.144c0.312,0,0.539-0.085,0.709-0.255s0.255-0.34,0.255-0.567c0-0.482-0.34-0.737-0.992-0.85
			v1.672H233.904z M233.45,195.233c-0.255,0.028-0.482,0.113-0.624,0.255c-0.17,0.142-0.227,0.312-0.227,0.539
			c0,0.425,0.283,0.68,0.85,0.794v-1.559V195.233z M233.904,200.392h-0.454v-0.737c-0.85-0.085-1.389-0.482-1.616-1.191l0.51-0.198
			c0.198,0.539,0.567,0.822,1.105,0.879v-1.757c-0.595-0.142-0.964-0.34-1.162-0.567c-0.17-0.227-0.255-0.482-0.255-0.765
			c0-0.737,0.482-1.191,1.417-1.332v-0.624h0.454v0.624c0.737,0.057,1.247,0.397,1.474,0.992l-0.51,0.17
			c-0.142-0.425-0.454-0.624-0.964-0.68v1.616c1.049,0.198,1.559,0.652,1.559,1.417c0,0.312-0.113,0.624-0.368,0.907
			c-0.227,0.283-0.652,0.454-1.219,0.482v0.737L233.904,200.392z"/>
		<path fill="#2B2A29" d="M207.429,225.903c0.283,0.028,0.737,0.085,1.361,0.085c1.105,0,1.871-0.198,2.324-0.624
			c0.34-0.34,0.567-0.765,0.567-1.361c0-0.992-0.737-1.531-1.389-1.701v-0.028c0.709-0.255,1.134-0.822,1.134-1.474
			c0-0.539-0.198-0.935-0.567-1.191c-0.425-0.34-0.992-0.482-1.842-0.482c-0.624,0-1.219,0.057-1.587,0.142V225.903z
			 M208.307,219.865c0.142-0.028,0.368-0.057,0.765-0.057c0.879,0,1.474,0.312,1.474,1.105c0,0.652-0.539,1.134-1.474,1.134h-0.794
			v-2.183H208.307z M208.307,222.7h0.709c0.964,0,1.729,0.368,1.729,1.304c0,0.992-0.822,1.304-1.729,1.304
			c-0.312,0-0.567,0-0.737-0.028V222.7H208.307z M212.871,219.185v6.746h0.879v-6.746H212.871z M215.252,225.931h3.742v-0.737
			h-2.891v-6.009h-0.879v6.746H215.252z M219.986,225.931h3.742v-0.737h-2.891v-6.009h-0.879v6.746H219.986z M224.72,219.185v6.746
			h0.879v-6.746H224.72z M227.923,225.931v-2.891c0-1.134-0.028-1.928-0.057-2.778h0.028c0.34,0.737,0.794,1.502,1.247,2.239
			l2.126,3.43h0.879v-6.746h-0.822v2.806c0,1.049,0.028,1.871,0.113,2.778h-0.028c-0.312-0.68-0.709-1.389-1.219-2.183l-2.154-3.402
			h-0.964v6.746h0.822H227.923z M238.808,222.388h-2.211v0.709h1.361v2.013c-0.198,0.113-0.595,0.17-1.162,0.17
			c-1.559,0-2.608-1.02-2.608-2.721c0-1.701,1.077-2.721,2.721-2.721c0.68,0,1.134,0.142,1.502,0.283l0.198-0.709
			c-0.283-0.142-0.907-0.312-1.672-0.312c-2.268,0-3.628,1.474-3.657,3.487c0,1.049,0.368,1.956,0.935,2.523
			c0.652,0.624,1.502,0.879,2.523,0.879c0.907,0,1.672-0.227,2.069-0.368V222.388z"/>
	</g>
</g>
</svg>


<a class="fancybox" href="#inline1" title="input">
  <div id="add"></div>
</a>
<div id="inline1" style="width:400px;display: none;">
  <h3>Add Bill</h3>
  <p>
    <form>
      <input type="text" value="20" />
      <input type="text" value="20" />
      <input type="submit" />
    </form>
  </p>
</div>

Answer 1

高度：10％; 宽度：20％; 这将解决您的问题。如果你保持任何大小的窗口，px将是相同的。如果您使用％，您的div也将自动更改。

Answer 2

对于响应式div，你必须使用宽度％，请参阅此示例它会帮助你

注意：对于宽度测试，请参阅整页

中的结果

$('#_763405264').on('click',function(){alert()})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?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="114 109 841 576" enable-background="new 114 109 841 576" xml:space="preserve">
<g id="Layer_x0020_1">
	
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="11055.7793" y1="-20834.7734" x2="11055.7793" y2="-5446.7729" gradientTransform="matrix(0.0283 0 0 -0.0283 221.5371 24.5107)">
		<stop  offset="0" style="stop-color:#CABCA0"/>
		<stop  offset="0.3804" style="stop-color:#D9CEB8"/>
		<stop  offset="0.749" style="stop-color:#E5DDD1"/>
		<stop  offset="0.8784" style="stop-color:#D9CEBA"/>
		<stop  offset="1" style="stop-color:#CDBEA3"/>
	</linearGradient>
	<path fill="url(#SVGID_1_)" d="M206.72,178.905c-3.968,0-7.2,3.231-7.2,7.2l0,0v42.774v386.215h663.61c3.968,0,7.2-3.231,7.2-7.2
		l0,0V236.079c0-3.968-3.231-7.2-7.2-7.2l0,0H255.702c-3.968,0-7.2-3.231-7.2-7.2l0,0v-35.574c0-3.968-3.231-7.2-7.2-7.2l0,0H206.72
		z"/>
	<g id="_763405264">
		<path fill="#252422" d="M239.46,204.133c0,0.283-0.227,0.51-0.51,0.51h-0.879v-14.797h0.879c0.283,0,0.51,0.227,0.51,0.51V204.133
			z M230.531,204.133v-13.776c0-0.283,0.227-0.51,0.51-0.51h5.442v14.797h-5.442C230.757,204.644,230.531,204.417,230.531,204.133z
			 M238.949,188.685h-7.909c-0.907,0-1.672,0.737-1.672,1.672v13.776c0,0.935,0.737,1.672,1.672,1.672h7.909
			c0.935,0,1.672-0.737,1.672-1.672v-13.776C240.622,189.422,239.885,188.685,238.949,188.685z"/>
		<path fill="#252422" d="M229.142,194.694c0,0.595-0.482,1.077-1.077,1.077h-13.776c-0.595,0-1.077-0.482-1.077-1.077v-8.617
			c0-0.595,0.482-1.077,1.077-1.077h13.776c0.595,0,1.077,0.482,1.077,1.077V194.694z M229.142,201.327
			c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288
			c0.142,0,0.255,0.113,0.255,0.255V201.327z M229.142,205.721c0,0.142-0.113,0.255-0.255,0.255h-3.288
			c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V205.721z
			 M229.142,210.114c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069
			c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V210.114z M223.076,201.327
			c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288
			c0.142,0,0.255,0.113,0.255,0.255V201.327z M223.076,205.721c0,0.142-0.113,0.255-0.255,0.255h-3.288
			c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V205.721z
			 M223.076,210.114c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069
			c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V210.114z M217.01,201.327
			c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288
			c0.142,0,0.255,0.113,0.255,0.255V201.327z M217.01,205.721c0,0.142-0.113,0.255-0.255,0.255h-3.288
			c-0.142,0-0.255-0.113-0.255-0.255v-2.069c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V205.721z
			 M217.01,210.114c0,0.142-0.113,0.255-0.255,0.255h-3.288c-0.142,0-0.255-0.113-0.255-0.255v-2.069
			c0-0.142,0.113-0.255,0.255-0.255h3.288c0.142,0,0.255,0.113,0.255,0.255V210.114z M229.198,182.902h-16.072
			c-1.134,0-2.041,0.907-2.041,2.041v25.653c0,1.134,0.907,2.041,2.041,2.041h16.072c1.134,0,2.041-0.907,2.041-2.041v-25.653
			C231.239,183.809,230.332,182.902,229.198,182.902z"/>
		<path fill="#252422" d="M233.904,199.144c0.312,0,0.539-0.085,0.709-0.255s0.255-0.34,0.255-0.567c0-0.482-0.34-0.737-0.992-0.85
			v1.672H233.904z M233.45,195.233c-0.255,0.028-0.482,0.113-0.624,0.255c-0.17,0.142-0.227,0.312-0.227,0.539
			c0,0.425,0.283,0.68,0.85,0.794v-1.559V195.233z M233.904,200.392h-0.454v-0.737c-0.85-0.085-1.389-0.482-1.616-1.191l0.51-0.198
			c0.198,0.539,0.567,0.822,1.105,0.879v-1.757c-0.595-0.142-0.964-0.34-1.162-0.567c-0.17-0.227-0.255-0.482-0.255-0.765
			c0-0.737,0.482-1.191,1.417-1.332v-0.624h0.454v0.624c0.737,0.057,1.247,0.397,1.474,0.992l-0.51,0.17
			c-0.142-0.425-0.454-0.624-0.964-0.68v1.616c1.049,0.198,1.559,0.652,1.559,1.417c0,0.312-0.113,0.624-0.368,0.907
			c-0.227,0.283-0.652,0.454-1.219,0.482v0.737L233.904,200.392z"/>
		<path fill="#2B2A29" d="M207.429,225.903c0.283,0.028,0.737,0.085,1.361,0.085c1.105,0,1.871-0.198,2.324-0.624
			c0.34-0.34,0.567-0.765,0.567-1.361c0-0.992-0.737-1.531-1.389-1.701v-0.028c0.709-0.255,1.134-0.822,1.134-1.474
			c0-0.539-0.198-0.935-0.567-1.191c-0.425-0.34-0.992-0.482-1.842-0.482c-0.624,0-1.219,0.057-1.587,0.142V225.903z
			 M208.307,219.865c0.142-0.028,0.368-0.057,0.765-0.057c0.879,0,1.474,0.312,1.474,1.105c0,0.652-0.539,1.134-1.474,1.134h-0.794
			v-2.183H208.307z M208.307,222.7h0.709c0.964,0,1.729,0.368,1.729,1.304c0,0.992-0.822,1.304-1.729,1.304
			c-0.312,0-0.567,0-0.737-0.028V222.7H208.307z M212.871,219.185v6.746h0.879v-6.746H212.871z M215.252,225.931h3.742v-0.737
			h-2.891v-6.009h-0.879v6.746H215.252z M219.986,225.931h3.742v-0.737h-2.891v-6.009h-0.879v6.746H219.986z M224.72,219.185v6.746
			h0.879v-6.746H224.72z M227.923,225.931v-2.891c0-1.134-0.028-1.928-0.057-2.778h0.028c0.34,0.737,0.794,1.502,1.247,2.239
			l2.126,3.43h0.879v-6.746h-0.822v2.806c0,1.049,0.028,1.871,0.113,2.778h-0.028c-0.312-0.68-0.709-1.389-1.219-2.183l-2.154-3.402
			h-0.964v6.746h0.822H227.923z M238.808,222.388h-2.211v0.709h1.361v2.013c-0.198,0.113-0.595,0.17-1.162,0.17
			c-1.559,0-2.608-1.02-2.608-2.721c0-1.701,1.077-2.721,2.721-2.721c0.68,0,1.134,0.142,1.502,0.283l0.198-0.709
			c-0.283-0.142-0.907-0.312-1.672-0.312c-2.268,0-3.628,1.474-3.657,3.487c0,1.049,0.368,1.956,0.935,2.523
			c0.652,0.624,1.502,0.879,2.523,0.879c0.907,0,1.672-0.227,2.069-0.368V222.388z"/>
	</g>
</g>
</svg>


<a class="fancybox" href="#inline1" title="input">
  <div id="add"></div>
</a>
<div id="inline1" style="width:400px;display: none;">
  <h3>Add Bill</h3>
  <p>
    <form>
      <input type="text" value="20" />
      <input type="text" value="20" />
      <input type="submit" />
    </form>
  </p>
</div>

如何使div元素响应？

2 个答案: