Fatal编程技术网
  • javascript/
  • Javascript Google站点中HTML框的大小

Javascript Google站点中HTML框的大小

javascript html css

Javascript Google站点中HTML框的大小,javascript,html,css,google-sites,Javascript,Html,Css,Google Sites,我试图在谷歌网站中插入一个带有HTML框的可折叠表。可折叠表的代码来自http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table。代码是 <html> <head> <style> .container { background-color:deepskyblue; width: 600px; height:50px;

我试图在谷歌网站中插入一个带有HTML框的可折叠表。可折叠表的代码来自
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>


.集装箱{
背景颜色：深蓝；
宽度：600px；
高度：50px；
位置：相对位置；
}
.头衔{
字号：16pt；
字体大小：粗体；
颜色：aliceblue；
位置：绝对位置；
左：20px；
最高：25%；
}
#打开{
显示：无；
}
.向上箭头{
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框底部：10px纯白；
}
.向下箭头{
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px纯白；
}
.向上箭头，.向下箭头{
位置：绝对位置；
最高：40%；
右：15px；
}
.隐藏内容{
利润率：0.20px0；
填充：10px 20px 10px 20px；
边框：1px纯色深蓝；
边界顶部：无；
背景色：aliceblue；
}
var崩溃；
var解压；
var开启=真；
//铬网站修复
var是_chrome=navigator.userAgent.toLowerCase（）.indexOf（'chrome'）>-1；
函数tempChromefix（）{
//关闭将“真”设置为“假”
如果（打开==false&&is_）{
document.getElementById（“已打开”）.style.display=“块”；
document.getElementById（“已关闭”）.style.display=“无”；
}否则{
返回false；
}
}
函数uncollapse（）{
document.getElementById（“closed”）.style.display=“block”；
document.getElementById（“已打开”）.style.display=“无”；
}
函数折叠（）{
document.getElementById（“已打开”）.style.display=“块”；
document.getElementById（“已关闭”）.style.display=“无”；
}
单击以打开下拉列表
单击以关闭下拉列表
它起作用了！
在单击之前，此内容将对用户隐藏
我面临的问题是桌子的宽度。我想它有最大可能的宽度取决于屏幕大小。例如，我希望将表扩展到MacBook和iMac中的屏幕大小

合乎逻辑的方法是使用
宽度：100%
，以便表继承其父表的屏幕大小。然而，在HTML框中，不同的类别似乎并不继承父属性

例如，在
.container
部分，如果我使用
宽度：100%
，它将收缩为零宽度，而不是屏幕的全尺寸

非常感谢您的帮助

---Madhur

我也遇到了这个问题，最终发现（非常不直观的）方法是将鼠标悬停在HTML框上，然后单击“对齐中心”图标。保存时，元素将为全宽（我的div至少为）