gpt4 book ai didi

javascript - Google 站点中 HTML Box 的大小

转载 作者:行者123 更新时间:2023-11-28 03:02:13 34 4
gpt4 key购买 nike

我正在尝试在 Google 站点中插入带有 HTML Box 的可折叠表格。可折叠表格的代码来自http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table。代码是

<html>
<head>
<style>
.container {
background-color:deepskyblue;
width: 600px;
height:50px;
position: relative;
}
.title {
font-size: 16pt;
font-weight: bold;
color: aliceblue;
position: absolute;
left: 20px;
top:25%;
}
#opened {
display: none;
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}
.arrow-up, .arrow-down {
position: absolute;
top: 40%;
right:15px;
}
.hidden-content {
margin:0 0 20px 0;
padding: 10px 20px 10px 20px;
border: 1px solid deepskyblue;
border-top: none;
background-color: aliceblue;
}
</style>
<script>
var collapse;
var uncollapse;
var turnOn = true;

// Chrome Sites Fix
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

function tempChromefix() {
// To turn off set true to false
if (turnOn == false && is_chrome) {
document.getElementById("opened").style.display = "block";
document.getElementById("closed").style.display = "none";
} else {
return false;
}
}

function uncollapse() {
document.getElementById("closed").style.display = "block";
document.getElementById("opened").style.display = "none";
}

function collapse() {
document.getElementById("opened").style.display = "block";
document.getElementById("closed").style.display = "none";
}
</script>
</head>

<body onLoad="tempChromefix()">

<table id="closed">
<tr>
<td>
<div class="container" onclick="collapse()">
<div class="title">Click to open drop-down</div>
<div class="arrow-down"></div>
</div>
</td>
</tr>
</table>

<table id="opened">
<tr>
<td>
<div class="container" onclick="uncollapse();">
<div class="title">Click to close drop-down</div>
<div class="arrow-up"></div>
</div>
<div class="hidden-content">
<h3>It works!</h3>
<p>This content is to be hidden from the user until clicked. </p>
</div>
</td>
</tr>
</table>
</body>
</html>

我面临的问题是表格的宽度。我希望它根据屏幕尺寸具有最大可能的宽度。例如,我希望将表格扩展到我的 MacBook 和 iMac 中的屏幕大小。

合乎逻辑的方法是使用 width: 100% 以便表格继承其父级的屏幕尺寸。然而,在 HTML Box 中,不同的类别似乎并没有继承父级的属性。

例如,在 .container 部分,如果我使用 width: 100%,它会折叠为零宽度,而不是屏幕的全尺寸。

非常感谢任何帮助!

--- 马杜尔

最佳答案

我也有这个问题,最终想出了(非常不直观的)方法是将鼠标悬停在 HTML 框上,然后单击“居中对齐”图标。当您保存时,元素将是全宽(我的 div 至少是)。

关于javascript - Google 站点中 HTML Box 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34304234/

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