gpt4 book ai didi

html - 如何使 div 元素响应?

转载 作者:行者123 更新时间:2023-11-28 07:29:04 27 4
gpt4 key购买 nike

我有一个 SVG 文件,每个形状都有两个 div 标签在我的 SVG 文件中。单击时小框打开新页面和大框单击时为此打开另一个页面,我现在在调整大小时使用我的浏览器我的 div 移开并且没有响应但使用illustrator 我让我的 SVG 文件响应,我如何制作我的 div调整大小时元素响应?有人可以帮我编码吗?这是我的代码

<!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>

最佳答案

我对您是要让它的大小响应还是位置响应感到有点困惑。所以我会回答两个。

如果你想让大小响应,那么你需要替换“width: 140px;”无论您希望它占据父元素的多少百分比。 IE。 “宽度:20%;”

它与定位非常相似,只是改变了几个词。而不是“左:222px;”您可以将其设置为您希望它移动的百分比。 I.E“左:20%;”唯一需要注意的是百分比是基于元素的左上角而不是中间。因此,如果您计划在将来将元素居中,请检查 this out

关于html - 如何使 div 元素响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31645086/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com