0

所以我有一个小问题，我无法弄清楚自己。它最近才开始这样做，我绝不是专家，真的只是足够的知识来危险。问题是窗口要么将所有内容推送到一列，当它应该是两个相邻的包装 div 时，或者它显示无用的滚动条并且除了阻止信息之外什么都不做。

这是CSS代码：

    body {
    display:table;
    font-family: helvetica;
    background-image: url('bg-body.jpg');
    background-size: 10% 100%;
    background-repeat:repeat-x;
    border: none;
    font-size: 14px;
    padding: 5px 5px;
    height: 220px;
    width: 396px;
    margin: 0 auto;
}
#links {
    display:table-row;
    vertical-align:middle;
    margin:auto auto;
    width:180px;
    height:200px;
    padding-right:5px;
    float:left;
}
#weather {
    display:table-row;
    vertical-align:middle;
    width:180px;
    height:200px;
    margin-top:0px;
    position:relative;
    float:left;
    background-image: url(bkg_weather.png);
    background-repeat: no-repeat no-repeat;
    text-align: center;
}
#weather a {
    font-size: 14px;
}
a {
    height:36px;
    width:180px;
    display:table-cell;
    color: rgb(181, 181, 181);
    text-decoration:none;
    vertical-align:middle;
}
img {
    display:inline;
    padding-right:10px;
    margin:3px 2px;
    vertical-align:middle;
}
a:visited {
    color: rgb(181, 181, 181);
    text-decoration:none;
}
a:hover {
    color: rgb(139, 1, 1);
    text-decoration:none;
    border-radius: 6px;
    border: none;
    background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#afafaf));
    padding-left:1px;
}
a:active {
    color: rgb(139, 1, 1);
    text-decoration:none;
    border-radius: 6px;
    border: none;
    background:-webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ccc));
}

这是html（注意大多数东西只是占位符）：

<!DOCTYPE html>
<html>
<head>
<title>Student Quick Links</title>
<link rel="stylesheet" href="master.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="links">
    <div><a target="_blank" href="link1"><img src="home.png" width="30" height="30" alt="Homepage" title="">Homepage</a></div>

    <div><a target="_blank" href="link2"><img src="mail.png" width="30" height="30" alt="Student Mail" title="Mail for Students">Student Mail</a></div>

    <div><a target="_blank" href="link3"><img src="contacts.png" width="30" height="30" alt="Moodle for 9-12" title="Moodle for 9-12"/>Moodle for 9-12</a></div>

    <div><a target="_blank" href="link4"><img src="calendar.png" width="30" height="30" alt="Moodle for K-8" title="Moodle for K-8"/>Moodle for K-8</a></div>

    <div><a target="_blank" href="link5"><img src="documents.png" width="30" height="30" alt="Library Catalogs" title="Library Cataloges"/>Library Cataloges</a></div>
</div>
</div>
<div id="weather">
    <iframe border="none" src="current_weather.htm" width="180px" height="138px"></iframe>
    <br>    <a href="link6" title="1">Additional Weather Information</a> 
</div>
    </body>
</html>

我正在为我们的学生开发一个 chrome 扩展程序，以便在他们的浏览器中使用一组快速链接……我们无法在 Google Apps Management 中推出书签，所以我正在编写一个扩展程序来自行处理。manifest.json 非常简单...标题和指向 popup.html 的链接。它现在在底部显示一个滚动条......我想我刚刚感到沮丧，我敢肯定这是我在沮丧中看不到的简单东西..

提前感谢您提供的任何帮助和建议。

平台：Google Chrome 和 Chrome OS 限制：不允许内联 Javascript 如果需要，可以提供更多信息。

4

0 回答 0