CSS拟合/位置问题(无论监视器大小如何,都适合页面)

问题描述 投票:1回答:1

我正在为我的学校创建一个互动的铃声时间表,我试过并尝试探索positionfloatleft/rightmargin等的各种值,我无法弄清楚如何使表格(时间表概述)适合所以它总是适合页面,而不是溢出一边。我试图尽可能保持用户友好,并且不要求教师知道如何缩小浏览器以查看所有内容。有时它会适合,例如在我的Chromebook操作系统上它会很合适。但是在我的Windows桌面上,它看起来有点太大了。我不是想把太多精确的定位值弄乱,所以最简单的方法是什么?

Things I've Tried

*将bell1 div中的bell2container div的位置更改为body div之外的float div,并将其保留在它所在的位置

*摆脱position,或position: relative;,或两者,或将其更改为current preview并使用各种值进行相同的故障排除

*强制百分比等级(例如50%)

Preview

//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!"); } } }); }

Code snippet

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

RECAP

我如何在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; })始终适合所以没有滚动条并且表将对齐与每一方?

html css
1个回答
2
投票

删除浮动和绝对定位的元素。我建议你使用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”即可。

© www.soinside.com 2019 - 2024. All rights reserved.