我正在为我的学校创建一个互动的铃声时间表,我试过并尝试探索position
,float
,left/right
,margin
等的各种值,我无法弄清楚如何使表格(时间表概述)适合所以它总是适合页面,而不是溢出一边。我试图尽可能保持用户友好,并且不要求教师知道如何缩小浏览器以查看所有内容。有时它会适合,例如在我的Chromebook操作系统上它会很合适。但是在我的Windows桌面上,它看起来有点太大了。我不是想把太多精确的定位值弄乱,所以最简单的方法是什么?
*将bell1
div中的bell2
和container
div的位置更改为body
div之外的float
div,并将其保留在它所在的位置
*摆脱position
,或position: relative;
,或两者,或将其更改为并使用各种值进行相同的故障排除
*强制百分比等级(例如50%)
//Not sure it's necessary to add the javascript, since it has no HTML DOM regarding style (it only involves the time and clock settings), but I'll add an excerpt just incase
function clock() {
/*global hr*/
/*global min*/
var time = new Date();
// hr is set to be 24 hours, aka 1 pm becomes 13
var hr = time.getHours();
var min = time.getMinutes();
var ampm = " PM";
if (hr < 12) {
ampm = " AM";
}
// since hr is 24 hour time, we make it 12 hour time by subtracting 12 from it if its above twelve
if (hr > 12) {
hr -= 12;
}
if (hr < 10) {
hr = "" + hr;
}
// if the minute value is under 10, add a 0 before it so it shows as 2:05 instead of 2:5
if (min < 10) {
min = "0" + min;
}
// set the text of the "Current Time" to the current time
document.getElementById("timetext").value = hr + ":" + min + ampm;
// refresh this function every 1 second, or 1000 milliseconds, to update time
setTimeout("clock()", 1000);
}
function setPeriod() {
//set elements from webpage as variables
var current = document.getElementById("timetext");
var period = document.getElementById("periodtext");
var per1 = document.getElementById("p1");
var per2 = document.getElementById("p2");
var per3 = document.getElementById("p3");
var per4 = document.getElementById("p4");
var per5 = document.getElementById("p5");
var adv = document.getElementById("adv");
var per6 = document.getElementById("p6");
var per7 = document.getElementById("p7");
var thur = document.getElementById("thur");
var revis = document.getElementById("revis");
// add a listener to the thursday button if it is checked/unchecked
thur.addEventListener("click", function() {
// if thursday is checked after being clicked
if (thur.checked == true && revis.checked == false) {
// disable the advisory button
adv.disabled = true;
// if the period 1 button is checked...
if (per1.checked == true) {
// ... set the text to the time period 1 starts and ends on a thursday
period.value = "8:50 AM - 9:33 AM";
}
// repeat the process for the other periods
else if (per2.checked == true) {
period.value = "9:38 AM - 10:21 AM";
} else if (per3.checked == true) {
period.value = "10:26 AM - 11:09 AM";
} else if (per4.checked == true) {
period.value = "11:09 AM - 12:36 PM";
} else if (per5.checked == true) {
period.value = "12:41 PM - 1:24 PM";
} else if (adv.checked == true) {
alert("Period Selection is reset due to Thursday-mode being enabled whilst Advisory is selected");
adv.checked = false;
period.value = "Select Period";
} else if (per6.checked == true) {
period.value = "1:28 PM - 2:12 PM";
} else if (per7.checked == true) {
period.value = "2:17 PM - 3:00 PM";
} else {
console.log("User tried enabling Thursday mode with no period selected!");
}
}
});
}
html,
body {
margin: 0;
padding: 0;
}
#container {
width: 50%;
position: absolute;
left: 25%;
}
.textHeader {
text-align: center;
font-size: 200%;
font-family: impact;
text-shadow: #f00 1px 1px;
}
table {
background: white;
padding: 0;
margin-top: 50px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-spacing: 0px;
border: solid 2px #000;
}
img {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
position: absolute;
width: 100%;
z-index: -100;
}
#credits {
text-align: center;
}
#bell1 {
display: inline-table;
position: absolute;
float: left;
margin-right: 100%;
width: 350px;
left: -375px;
}
#bell2 {
display: inline-table;
position: absolute;
float: right;
margin-left: 100%;
width: 350px;
right: -375px;
}
#norm,
#norm2 {
position: relative;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
font-size: 200%;
padding: 0px;
}
tr {
margin: 0;
padding: 0;
}
.lunch {
background-color: silver;
}
td,
th {
border: solid 1px #000;
text-align: center;
}
tr,
td,
th {
font-size: 115%;
}
.textLabel {
font-size: 150%;
font-family: impact;
text-align: center;
}
.textImp,
.textSub {
font-size: 110%;
font-family: arial;
text-align: center;
}
.textImp {
color: black;
text-shadow: rgb(255, 0, 0) 1px 1px;
font-style: bold;
}
.text {
background-color: black;
width: 100%;
color: white;
text-align: center;
font-size: 250%;
font-family: courier;
margin: 0;
font-weight: bolder;
text-shadow: 2px 2px #f00;
}
c #periodButtons {
margin-top: 25px;
font-size: 125%;
}
#currentPeriod,
#currentLunch,
#currentTime {
margin: 0;
margin-bottom: 5px;
padding: 0;
width: 100%;
background: black;
border: solid 1px red;
}
<html>
<head>
<title>City High Bell Schedule</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="city_high_bell_schedule.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
<script src="city_high_bell_schedule.js"></script>
</head>
<body onload="clock();">
<div id="container">
<div id="body">
<div id="bell1">
<h2 id="norm" class="textImp">Normal</h2>
<table>
<tr>
<th>Period</th>
<th>MTWF</th>
<th>TH</th>
</tr>
<tr>
<td>Period 1</td>
<td>8:50-9:39</td>
<td>8:50-9:33</td>
</tr>
<tr>
<td>Period 2</td>
<td>9:44-10:33</td>
<td>9:38-10:21</td>
</tr>
<tr>
<td>Period 3</td>
<td>10:38-11:27</td>
<td>10:26-11:09</td>
</tr>
<tr>
<td>Period 4</td>
<td>11:27-12:52</td>
<td>N/A</td>
</tr>
<tr class="lunch">
<td>A LUNCH<br>CLASS</td>
<td>11:27-11:55<br>12:00-12:52</td>
<td>11:09-11:39<br>11:44-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>B LUNCH<br>CLASS</td>
<td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
<td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>C LUNCH</td>
<td>11:32-12:24<br>12:24-12:52</td>
<td>11:14-12:05<br>12:07-12:36</td>
</tr>
<tr>
<td>Period 5</td>
<td>12:57-1:46</td>
<td>12:41-1:24</td>
</tr>
<tr>
<td>Advisory</td>
<td>1:46-2:12</td>
<td>N/A</td>
</tr>
<tr>
<td>Period 6</td>
<td>2:17-3:06</td>
<td>1:28-2:12</td>
</tr>
<tr>
<td>Period 7</td>
<td>3:11-4:00</td>
<td>2:17-3:00</td>
</tr>
</table>
</div>
<div id="bell2">
<h2 id="norm2" class="textImp">Revised</h2>
<table>
<tr>
<th>Period</th>
<th>MTWF</th>
<th>TH</th>
</tr>
<tr>
<td>Period 1</td>
<td>8:45-9:37</td>
<td>8:45-9:31</td>
</tr>
<tr>
<td>Period 2</td>
<td>9:42-10:32</td>
<td>9:36-10:20</td>
</tr>
<tr>
<td>Period 3</td>
<td>10:37-11:27</td>
<td>10:25-11:09</td>
</tr>
<tr>
<td>Period 4</td>
<td>11:27-12:52</td>
<td>N/A</td>
</tr>
<tr class="lunch">
<td>A LUNCH<br>CLASS</td>
<td>11:27-11:55<br>12:00-12:52</td>
<td>11:09-11:39<br>11:44-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>B LUNCH<br>CLASS</td>
<td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
<td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>C LUNCH</td>
<td>11:32-12:24<br>12:24-12:52</td>
<td>11:14-12:05<br>12:07-12:36</td>
</tr>
<tr>
<td>Period 5</td>
<td>12:57-1:48</td>
<td>12:41-1:27</td>
</tr>
<tr>
<td>Advisory</td>
<td>1:48-2:15</td>
<td>N/A</td>
</tr>
<tr>
<td>Period 6</td>
<td>2:20-3:10</td>
<td>1:32-2:16</td>
</tr>
<tr>
<td>Period 7</td>
<td>3:15-4:05</td>
<td>2:21-3:05</td>
</tr>
</table>
</div>
</div>
<h4 class="textHeader">City High Bell Schedule</h4>
<p class="textSub">This is a timer/clock that automatically updates what the current period is, what time the period begins and ends, plus an overview of the schedule itself. It is meant to be put on a smartboard during work time, reading time, whatever it may be. So
students can stop asking, "What time does this period end?"<br></p>
<p class="textImp">THE TEACHER DISMISSES THE CLASS, NOT THE BELL OR THIS REFERENCE.</p>
<p class="textSub" style="text-align: center;"><b>Instructions:</b> Select the current period, and this page *should* do the rest for you.</p>
<div id="schedule">
<p class="textLabel">Current Time</p>
<div id="currentTime">
<input type="button" value="Loading..." id="timetext" class="text" />
</div>
<p class="textLabel">Current Period</p>
<div id="currentPeriod">
<input type="button" value="Select Period" id="periodtext" class="text" />
</div>
<div id="periodButtons" style="text-align: center;">
<input id="p1" type="radio" name="per" />Period 1
<input id="p2" type="radio" name="per" />Period 2
<input id="p3" type="radio" name="per" />Period 3
<input id="p4" type="radio" name="per" />Period 4
<input id="p5" type="radio" name="per" />Period 5
<input id="adv" type="radio" name="per" />Advisory
<input id="p6" type="radio" name="per" />Period 6
<input id="p7" type="radio" name="per" />Period 7
<br>
<input id="thur" type="checkbox" />Thursday
<input id="revis" type="checkbox" checked="true" />Revised Schedule (2018/2019)
</div>
<hr>
<div id="footer">
<p id="credits">
Made by Josh Brenneman
</p>
</div>
</div>
</div>
</body>
</html>
bell1/bell2
我如何在CSS中使它无论显示器大小如此,如果网页处于100%缩放(也就是默认缩放),我如何使表(#container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-wrap: nowrap;
flex-direction: row;
align-items: flex-start;
width: 100%;
}
#container .column {
flex: 1 1 auto;
padding-left: 15px;
padding-right: 15px;
}
#container .column.table{
width: 70%;
}
.textHeader {
text-align: center;
font-size: 200%;
font-family: impact;
text-shadow: #f00 1px 1px;
}
table {
background: white;
padding: 0;
margin-top: 50px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-spacing: 0px;
border: solid 2px #000;
}
img {
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
position: absolute;
width: 100%;
z-index: -100;
}
#credits {
text-align: center;
}
#bell1 {
display: inline-table;
}
#bell2 {
display: inline-table;
}
#norm, #norm2 {
position: relative;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
font-size: 200%;
padding: 0px;
}
tr {
margin: 0;
padding: 0;
}
.lunch {
background-color: silver;
}
td,
th {
border: solid 1px #000;
text-align: center;
}
tr,
td,
th {
font-size: 115%;
}
.textLabel {
font-size: 150%;
font-family: impact;
text-align: center;
}
.textImp,
.textSub {
font-size: 110%;
font-family: arial;
text-align: center;
}
.textImp {
color: black;
text-shadow: rgb(255, 0, 0) 1px 1px;
font-style: bold;
}
.text {
background-color: black;
width: 100%;
color: white;
text-align: center;
font-size: 250%;
font-family: courier;
margin: 0;
font-weight: bolder;
text-shadow: 2px 2px #f00;
}
c
#periodButtons {
margin-top: 25px;
font-size: 125%;
}
#currentPeriod,
#currentLunch,
#currentTime {
margin: 0;
margin-bottom: 5px;
padding: 0;
width: 100%;
background: black;
border: solid 1px red;
}
)始终适合所以没有滚动条并且表将对齐与每一方?
删除浮动和绝对定位的元素。我建议你使用flex来对齐你的元素。当元素没有相对定位的父元素时,请勿使用绝对位置。检查代码
<html>
<head>
<title>City High Bell Schedule</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="city_high_bell_schedule.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
<script src="city_high_bell_schedule.js"></script>
</head>
<body>
<div id="container">
<div class="column table">
<h2 id="norm" class="textImp">Normal</h2>
<table>
<tr>
<th>Period</th>
<th>MTWF</th>
<th>TH</th>
</tr>
<tr>
<td>Period 1</td>
<td>8:50-9:39</td>
<td>8:50-9:33</td>
</tr>
<tr>
<td>Period 2</td>
<td>9:44-10:33</td>
<td>9:38-10:21</td>
</tr>
<tr>
<td>Period 3</td>
<td>10:38-11:27</td>
<td>10:26-11:09</td>
</tr>
<tr>
<td>Period 4</td>
<td>11:27-12:52</td>
<td>N/A</td>
</tr>
<tr class="lunch">
<td>A LUNCH<br>CLASS</td>
<td>11:27-11:55<br>12:00-12:52</td>
<td>11:09-11:39<br>11:44-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>B LUNCH<br>CLASS</td>
<td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
<td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>C LUNCH</td>
<td>11:32-12:24<br>12:24-12:52</td>
<td>11:14-12:05<br>12:07-12:36</td>
</tr>
<tr>
<td>Period 5</td>
<td>12:57-1:46</td>
<td>12:41-1:24</td>
</tr>
<tr>
<td>Advisory</td>
<td>1:46-2:12</td>
<td>N/A</td>
</tr>
<tr>
<td>Period 6</td>
<td>2:17-3:06</td>
<td>1:28-2:12</td>
</tr>
<tr>
<td>Period 7</td>
<td>3:11-4:00</td>
<td>2:17-3:00</td>
</tr>
</table>
</div>
<div class="column">
<h4 class="textHeader">City High Bell Schedule</h4>
<p class="textSub">This is a timer/clock that automatically updates what the current period is, what time the period begins and ends, plus an overview of the schedule itself. It is meant to be put on a smartboard during work time,
reading time, whatever it may be. So students can stop asking, "What time does this period end?"<br></p>
<p class="textImp">THE TEACHER DISMISSES THE CLASS, NOT THE BELL OR THIS REFERENCE.</p>
<p class="textSub" style="text-align: center;"><b>Instructions:</b> Select the current period, and this page *should* do the rest for you.</p>
<p class="textLabel">Current Time</p>
<div id="currentTime">
<input type="button" value="Loading..." id="timetext" class="text" />
</div>
<p class="textLabel">Current Period</p>
<div id="currentPeriod">
<input type="button" value="Select Period" id="periodtext" class="text" />
</div>
<div id="periodButtons" style="text-align: center;">
<input id="p1" type="radio" name="per" />Period 1
<input id="p2" type="radio" name="per" />Period 2
<input id="p3" type="radio" name="per" />Period 3
<input id="p4" type="radio" name="per" />Period 4
<input id="p5" type="radio" name="per" />Period 5
<input id="adv" type="radio" name="per" />Advisory
<input id="p6" type="radio" name="per" />Period 6
<input id="p7" type="radio" name="per" />Period 7
<br>
<input id="thur" type="checkbox" />Thursday
<input id="revis" type="checkbox" checked="true"/>Revised Schedule (2018/2019)
</div>
<hr>
<div id="footer">
<p id="credits">
Made by Josh Brenneman
</p>
</div>
</div>
<div class="column table">
<h2 id="norm2" class="textImp">Revised</h2>
<table>
<tr>
<th>Period</th>
<th>MTWF</th>
<th>TH</th>
</tr>
<tr>
<td>Period 1</td>
<td>8:45-9:37</td>
<td>8:45-9:31</td>
</tr>
<tr>
<td>Period 2</td>
<td>9:42-10:32</td>
<td>9:36-10:20</td>
</tr>
<tr>
<td>Period 3</td>
<td>10:37-11:27</td>
<td>10:25-11:09</td>
</tr>
<tr>
<td>Period 4</td>
<td>11:27-12:52</td>
<td>N/A</td>
</tr>
<tr class="lunch">
<td>A LUNCH<br>CLASS</td>
<td>11:27-11:55<br>12:00-12:52</td>
<td>11:09-11:39<br>11:44-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>B LUNCH<br>CLASS</td>
<td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
<td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
</tr>
<tr class="lunch">
<td>CLASS<br>C LUNCH</td>
<td>11:32-12:24<br>12:24-12:52</td>
<td>11:14-12:05<br>12:07-12:36</td>
</tr>
<tr>
<td>Period 5</td>
<td>12:57-1:48</td>
<td>12:41-1:27</td>
</tr>
<tr>
<td>Advisory</td>
<td>1:48-2:15</td>
<td>N/A</td>
</tr>
<tr>
<td>Period 6</td>
<td>2:20-3:10</td>
<td>1:32-2:16</td>
</tr>
<tr>
<td>Period 7</td>
<td>3:15-4:05</td>
<td>2:21-3:05</td>
</tr>
</table>
</div>
</div>
</body>
qazxswpoi
在您的响应式CSS代码中。如果要为每个元素赋予100%宽度,只需将flex-direction值设置为“column”即可。