您可以设置代码区域以html显示吗?

I've have made some code to have 3 sets of 3 traffic lights, but I think because the way that I have positioned them in CSS by using position: relative and then using left: and Bottom: etc to move them so that they are all line up means that I have a load of blank space at the bottom of the page. Traffic lights

有没有办法只显示灯光所在的像素范围,然后忽略所有空白?还是可以更改放置它们的方式?

抱歉,代码长了...

谢谢。

let allZCircles = select(".Zcircle"),
    allA1Circles = select(".A1circle"),
    allA2Circles = select(".A2circle"),
    allA3Circles = select(".A3circle"),
    allA4Circles = select(".A4circle"),
    allA5Circles = select(".A5circle"),
    allA6Circles = select(".A6circle"),
    allA7Circles = select(".A7circle"),
    allA8Circles = select(".A8circle"),
    $15a = document.getElementById("$15avalue").innerHTML,
    
    $15b = document.getElementById("$15bvalue").innerHTML,
    $15c = document.getElementById("$15cvalue").innerHTML,
    $16a = document.getElementById("$16avalue").innerHTML, 
    $16b = document.getElementById("$16bvalue").innerHTML,
    $16c = document.getElementById("$16cvalue").innerHTML,
    $13a = document.getElementById("$13avalue").innerHTML, 
    $13b = document.getElementById("$13bvalue").innerHTML,
    $13c = document.getElementById("$13cvalue").innerHTML;

//hides all the lights
setOpacity(allZCircles, 0);
setOpacity(allA1Circles, 0);
setOpacity(allA2Circles, 0);
setOpacity(allA3Circles, 0);
setOpacity(allA4Circles, 0);
setOpacity(allA5Circles, 0);
setOpacity(allA6Circles, 0);
setOpacity(allA7Circles, 0);
setOpacity(allA8Circles, 0);

//set light color 

//light 15A
if($15a >= 5) {
    setOpacity(select(".Zcircle.green"), 1);  // makes green light visible
    
} else if ($15a < 3) {
    setOpacity(select(".Zcircle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".Zcircle.yellow"), 1);  // makes yellow light visible
    
}

//15b

if($15b >= 5) {
    setOpacity(select(".A1circle.green"), 1);  // makes green light visible
    
} else if ($15b < 3) {
    setOpacity(select(".A1circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A1circle.yellow"), 1);  // makes yellow light visible
    
}

//15c
if($15c >= 5) {
    setOpacity(select(".A2circle.green"), 1);  // makes green light visible
    
} else if ($15c < 3) {
    setOpacity(select(".A2circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A2circle.yellow"), 1);  // makes yellow light visible
    
}

//16a
if($16a >= 5) {
    setOpacity(select(".A3circle.green"), 1);  // makes green light visible
    
} else if ($16a < 3) {
    setOpacity(select(".A3circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A3circle.yellow"), 1);  // makes yellow light visible
    
}

//16b
if($16b >= 5) {
    setOpacity(select(".A4circle.green"), 1);  // makes green light visible
    
} else if ($16b < 3) {
    setOpacity(select(".A4circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A4circle.yellow"), 1);  // makes yellow light visible
    
}

//16c
if($16c >= 5) {
    setOpacity(select(".A5circle.green"), 1);  // makes green light visible
    
} else if ($16c < 3) {
    setOpacity(select(".A5circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A5circle.yellow"), 1);  // makes yellow light visible
    
}

//13a
if($13a >= 5) {
    setOpacity(select(".A6circle.green"), 1);  // makes green light visible
    
} else if ($13a < 3) {
    setOpacity(select(".A6circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A6circle.yellow"), 1);  // makes yellow light visible
    
}

//13b
if($13b >= 5) {
    setOpacity(select(".A7circle.green"), 1);  // makes green light visible
    
} else if ($13b < 3) {
    setOpacity(select(".A7circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A7circle.yellow"), 1);  // makes yellow light visible
    
}

//13c
if($13c >= 5) {
    setOpacity(select(".A8circle.green"), 1);  // makes green light visible
    
} else if ($13c < 3) {
    setOpacity(select(".A8circle.red"), 1);  // makes red light visible
    
} else {
    setOpacity(select(".A8circle.yellow"), 1);  // makes yellow light visible
    
}


function select(selector) {return document.querySelectorAll(selector); }
function setOpacity(selectors, opacity) {selectors.forEach((selector) => selector.style.opacity = opacity);}
.Zcontainer {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 250px;
  bottom: 75px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.Zcircle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.Zcircle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.Zcircle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.Zcircle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.Zcircle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.A1container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 350px;
  bottom: 305px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A1circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A1circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A1circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A1circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A1circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}



.A2container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 450px;
  bottom: 535px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A2circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A2circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A2circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A2circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A2circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.PC15 {
  position: relative;
  z-index: 2;
  left: 360px;
  bottom: 5px;
  font-size: 20px;
}

.PC15a {
  position: relative;
  z-index: 2;
  left: 280px;
  top: 5px;
}

.PC15b {
  position: relative;
  z-index: 2;
  left: 380px;
  bottom: 35px;
}

.PC15c {
  position: relative;
  z-index: 2;
  left: 480px;
  bottom: 75px;
}

.A3container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 600px;
  bottom: 840px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A3circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A3circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A3circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A3circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A3circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.A4container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 700px;
  bottom: 1070px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A4circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A4circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A4circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A4circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A4circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.A5container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 800px;
  bottom: 1300px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A5circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A5circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A5circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A5circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A5circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.PC16 {
  position: relative;
  z-index: 2;
  left: 710px;
  bottom: 770px;
  font-size: 20px;
}

.PC16a {
  position: relative;
  z-index: 2;
  left: 630px;
  bottom: 760px;
}

.PC16b {
  position: relative;
  z-index: 2;
  left: 730px;
  bottom: 800px;
}

.PC16c {
  position: relative;
  z-index: 2;
  left: 830px;
  bottom: 839px;
}

.A6container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 1000px;
  bottom: 1605px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A6circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A6circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A6circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A6circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A6circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.A7container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 1100px;
  bottom: 1835px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A7circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A7circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A7circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A7circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A7circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.A8container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  left: 1200px;
  bottom: 2065px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A8circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  z-index: 2;
  height: 40px;
  width: 40px;
}

.A8circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A8circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A8circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A8circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
  
}

.PC13 {
  position: relative;
  z-index: 2;
  left: 1080px;
  bottom: 1535px;
  font-size: 20px;
}

.PC13a {
  position: relative;
  z-index: 2;
  left: 1028px;
  bottom: 1520px;
}

.PC13b {
  position: relative;
  z-index: 2;
  left: 1130px;
  bottom: 1561px;
}

.PC13c {
  position: relative;
  z-index: 2;
  left: 1230px;
  bottom: 1600px;
}

.all15 {
  position: relative;
  z-index: 2;
  left: 30px;
}

.all16 {
  position: relative;
  z-index: 2;
  left: 30px;
  bottom: 100px
}

.all13 {
  position: relative;
  z-index: 2;
  right: 5px;
  bottom: 200px;
}

.allthelights {
  position: relative;
  z-index: 2;
  left: 30px;
  bottom:10px;
  font-family: Roboto, Arial, sans-serif;
}

.headings{
  position:relative;
  z-index: 2;
  left: 750px;
  font-family: Roboto, arial, san-serif;
  
}

.tlback{
  background-color: rgb(155,155,155);
  border-radius: 5%;
  width: 1160px;
  height: 380px;
  position: relative;
  z-index: 0;
  left: 250px;
  bottom:2620px;
  
}
<body>

     <h1 class="headings"> Andon </h1>

 <br>

<div class="justchecking">
 <div class="allthelights">
   <div class="all15">
     <h2 class="PC15"> PC15 </h2>
     <h3 class="PC15a"> A </h3>
     <h3 class="PC15b"> B </h3>
     <h3 class="PC15c"> C </h3>

     <div class="Zcontainer">
       <div class="Zcircle red" color="red">
       </div>
       <div class="Zcircle yellow" color="yellow"></div>
       <div class="Zcircle green" color="green"></div>
     </div>

     <div class="A1container">
       <div class="A1circle red" color="red">
       </div>
       <div class="A1circle yellow" color="yellow"></div>
       <div class="A1circle green" color="green"></div>
     </div>

     <div class="A2container">
       <div class="A2circle red" color="red">
       </div>
       <div class="A2circle yellow" color="yellow"></div>
       <div class="A2circle green" color="green"></div>
     </div>
   </div>

   <div class="all16">

     <h2 class="PC16"> PC16 </h2>
     <h3 class="PC16a"> A </h3>
     <h3 class="PC16b"> B </h3>
     <h3 class="PC16c"> C </h3>

     <div class="A3container">
       <div class="A3circle red" color="red">;
       </div>
       <div class="A3circle yellow" color="yellow"></div>
       <div class="A3circle green" color="green"></div>
     </div>

     <div class="A4container">
       <div class="A4circle red" color="red">
       </div>
       <div class="A4circle yellow" color="yellow"></div>
       <div class="A4circle green" color="green"></div>
     </div>

     <div class="A5container">
       <div class="A5circle red" color="red">
       </div>
       <div class="A5circle yellow" color="yellow"></div>
       <div class="A5circle green" color="green"></div>
     </div>
   </div>

   <div class="all13">

     <h2 class="PC13"> PC13 & 22 </h2>
     <h3 class="PC13a"> A </h3>
     <h3 class="PC13b"> B </h3>
     <h3 class="PC13c"> C </h3>

     <div class="A6container">
       <div class="A6circle red" color="red">
       </div>
       <div class="A6circle yellow" color="yellow"></div>
       <div class="A6circle green" color="green"></div>
     </div>

     <div class="A7container">
       <div class="A7circle red" color="red">
       </div>
       <div class="A7circle yellow" color="yellow"></div>
       <div class="A7circle green" color="green"></div>
     </div>

     <div class="A8container">
       <div class="A8circle red" color="red">
       </div>
       <div class="A8circle yellow" color="yellow"></div>
       <div class="A8circle green" color="green"></div>
     </div>
   </div>
 </div>
  </div>

<div id = "$15avalue"> 6 </div> 
<div id = "$15bvalue"> 3 </div>
<div id = "$15cvalue"> 1 </div>
<div id = "$16avalue"> 6 </div>
<div id = "$16bvalue"> 6 </div>
<div id = "$16cvalue"> 6 </div>
<div id = "$13avalue"> 6 </div>
<div id = "$13bvalue"> 6 </div>
<div id = "$13cvalue"> 6 </div>

</body>