如何修复div标签的位置？

时间：2016-01-27 09:47:15

标签： javascript jquery html css responsive-design

我正在为我的项目创建一个交互式的周期表。enter image description here

这看起来很好，但是一旦我改变分辨率，右侧元素就会散布在整个页面上，这一切都变得一团糟。 enter image description here

以下是片段： -

＆＃13;
＆＃13; 
function Lanthanoids() {
  var elements1 = document.getElementsByClassName('lanthanoids');
  var i, marginLeft = -70;

  for (i = 0; i < elements1.length; i++) {
    marginLeft += parseInt(window.getComputedStyle(elements1[i]).marginLeft, 10) + 70;
    elements1[i].style.marginLeft = marginLeft + 'px';
  }
}

function Actinoids() {
  var elements2 = document.getElementsByClassName('actinoids');
  var i, marginLeft = -70;

  for (i = 0; i < elements2.length; i++) {
    marginLeft += parseInt(window.getComputedStyle(elements2[i]).marginLeft, 10) + 70;
    elements2[i].style.marginLeft = marginLeft + 'px';
  }
}

function TypesHover() {
  $('.info').hover(
    function() {
      getId = this.id;
      originalColor = document.getElementById(getId).style.backgroundColor;
      originalAll = document.querySelector('div').style.backgroundColor;
      switch (getId) {
        case "alkali_metals":
          $(".info:not(#lithium, #sodium, #potassium, #rubidium, #cesium, #francium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "alkaline_earth_metals":
          $(".info:not(#beryllium, #magnesium, #calcium, #strontium, #barium, #radium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "transition_metals":
          $(".info:not(#scandium, #titanium, #vanadium, #chromium, #manganese, #iron, #cobalt, #nickel, #copper, #zinc, #yttrium, #zirconium, \
                #niobium, #molybdenum, #technitium, #ruthenium, #rhodium, #palladium, #silver, #cadmium, #hafnium, #tantalum, #tungsten, \
                #rhenium, #osmium, #iridium, #platinum, #gold, #mercury, #rutherfordium, #dubnium, #seaborgium, #bohrium, #hassium, #meitnerium, \
                #darmstadtium, #roentgenium, #copernicium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "post_transition_metals":
          $(".info:not(#aluminium, #gallium, #indium, #tin, #thalium, #lead, #bismuth, #ununtrium, #flerovium, \
                #ununpentium, #livemorium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "lanths":
          $(".info:not(#lanthanum, #cerium, #praseodymium, #neodymium, #promethium, #samarium, #europium, #gadolinium, #terbium, #dysprosium, \
                #holmium, #erbium, #thulium, #ytterbium, #lutetium, #lanths_space, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "acts":
          $(".info:not(#actinium, #thorium, #protactinium, #uranium, #neptunium, #plutonium, #americium, #curium, #berkilium, #californium, \
                #einsteinium, #fermium, #mendelivium, #nobelium, #lawrencium, #acts_space, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "other_non_metals":
          $(".info:not(#hydrogen, #carbon, #nitrogen, #oxygen, #phosphorus, #sulphur, #selenium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "halogens":
          $(".info:not(#flourine, #chlorine, #bromine, #iodine, #astatine, #ununseptium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "noble_gases":
          $(".info:not(#helium, #neon, #argon, #krypton, #xenon, #radon, #ununoctium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        case "metalloids":
          $(".info:not(#boron, #silicon, #germanium, #arsenic, #antimony, #tellurium, #polonium, .types, .typesCont)").css("background-color", "D3D3D3");
          break;

        default:
          $(".info").css("background-color", originalAll);
      }
    },
    function() {
      document.getElementById(getId).style.backgroundColor = originalColor;
      // document.querySelector('div').style.backgroundColor = originalAll;
      $(".info").css("background-color", originalAll);
    });
}

function Slider(val) {
  var slider = document.getElementById("temperature");
  var val = slider.value;
  originalAll = document.querySelector('div').style.backgroundColor;
  document.getElementById('amount').innerHTML = val + "K";

  // switch(val)
  // {
  //     case "28":
  //     $('#hydrogen, #helium, #neon').css("background-color", "red");
  //     break;

  //     case "56":
  //     $('#oxygen, #flourine').css("background-color", "blue");
  //     break;

  //     case "84":
  //     $('#nitrogen').css("background-color", "red");
  //     $('#argon').css("background-color", "blue");
  //     break;
  // }
  if (val >= 28) {
    $('#hydrogen, #helium, #neon').css("background-color", "red");
  }
  if (val >= 56) {
    $('#oxygen, #flourine').css("background-color", "blue");
  }
  if (val >= 84) {
    $('#nitrogen').css("background-color", "red");
    $('#argon').css("background-color", "blue");
  }
  if (val >= 112) {
    $('#hydrogen, #helium, #neon, #oxygen, #flourine, #nitrogen, #argon').css("background-color", "red");
  }
  if (val >= 140) {
    $('#krypton').css("background-color", "red");
  }
}

window.addEventListener('load', Lanthanoids, false);
window.addEventListener('load', Actinoids, false);
window.addEventListener('load', TypesHover, false);
window.addEventListener('load', Slider, false);
＆＃13; 
* {
  text-align: center;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: blue;
}

img {
  visibility: hidden;
  display: inline;
  position: absolute;
  margin-left: 70px auto;
  margin-right: 70px auto;
}


body {
	background-color: #eafeef;
}

p {
  font-size: 5px;
  margin-top: -40px;
  letter-spacing: -1px;
}

h2 {
  line-height: 60px;
}

.para {
  font-size: 10px;
  letter-spacing: 0px;
  line-height: 20px;
  text-align: center;
}

em {
  font-weight: bold;
  font-size: 7px;
  padding-right: 5px;
}

div {
  display: inline;
  box-shadow: none;
  height: 70px;
  width: 70px;
  float: left;
  line-height: 60px;
  font-family: Trebuchet MS;
  font-size: 30px;
  letter-spacing: -2px;
}

div:hover div:not(.typesCont):hover {
  cursor: pointer;
  -moz-box-shadow: inset 0 0 6px #000000;
  -webkit-box-shadow: inset 0 0 6px #000000;
  box-shadow: inset 0 0 6px #000000;
}

.types {
  visibility: visible;
  position: absolute;
  height: 35px;
  width: 80px;
  line-height: 15px;
  left: 260px;
  top: 50px;
  letter-spacing: -1px;
  font-size: 10px;
}

#metals,
#non_metals,
#metalloids {
  height: 80px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 0px;
  letter-spacing: 0px;
}

#metals {
  width: 325px;
  padding: 15px;
  margin-top: 15px;
  margin-left: 235px;
  background-color: #9faeb8;
}

#non_metals {
  width: 170px;
  padding: 15px;
  margin-top: -110px;
  margin-left: 600px;
  background-color: #9faeb8;
}

#metalloids {
  height: 30px;
  width: 109px;
  line-height: 30px;
  top: 23px;
  left: 847px;
  background-color: #8ee39c;
  transform: rotate(90deg);
  transform-origin: left top 0;
}

#alkali_metals {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  line-height: 30px;
  background-color: #ffcc33;
}

#alkaline_earth_metals {
  left: 340px;
  background-color: #ffff64;
}

#transition_metals {
  left: 420px;
  background-color: #ddbbbb;
}

#post_transition_metals {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 500px;
  background-color: #abe3d5;
}

#other_non_metals {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 627px;
  background-color: #4dff4d;
}

#halogens {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 30px;
  left: 707px;
  background-color: #4bf1d5;
}

#noble_gases {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 25px;
  line-height: 25px;
  top: 85px;
  left: 665px;
  background-color: #89d3ff;
}

#lanths {
  border-bottom-left-radius: 5px;
  line-height: 25px;
  top: 85px;
  left: 340px;
  height: 25px;
  background-color: #ffc3a6;
}

#lanths_space {
  margin-left: 210px;
  margin-top: 247px;
  font-size: 20px;
  top: 800px;
  background-color: #ffc3a6;
}

#acts {
  border-bottom-right-radius: 5px;
  line-height: 25px;
  top: 85px;
  left: 420px;
  height: 25px;
  background-color: #f0c6e2;
}

#acts_space {
  margin-left: 210px;
  font-size: 20px;
  background-color: #f0c6e2;
}

.row4,
.row5,
.row6,
.row7,
.row8,
.row9,
.row10,
.row11,
.row12 > div:nth-child(1),
.row3 > div:nth-child(1) {
  margin-top: 232px;
}

.row3 > div,
.row4 > div,
.row5 > div,
.row6 > div,
.row7 > div,
.row8 > div,
.row9 > div,
.row10 > div,
.row11 > div,
.row12 > div,
.row13 > div,
.row14 > div,
.row15 > div,
.row16 > div {
  background-color: #ddbbbb;
}

.row1 > div {
  background-color: #ffcc33;
}

.row1 > #lithium,
.row2 > div:nth-child(1),
.row13 > div:nth-child(1),
.row18 > div:nth-child(2),
.row14,
.row15,
.row16,
.row17 {
  margin-top: 92px;
}

.row2 > div {
  background-color: #ffff64;
}

.row17 > div {
  background-color: #49f1d5;
}

.row18 > div {
  background-color: #8Bd3ff;
}

#hydrogen {
  position: absolute;
  background-color: #42ff42;
  left: 78px;
  top: 30px;
}

#helium {
  position: absolute;
  background-color: #8Bd3ff;
  top: 30px;
  right: 11px;
  /*right: 28px;*/
}

#carbon,
#nitrogen,
#oxygen,
#phosphorus,
#sulphur,
#selenium {
  background-color: #4fff4f;
}

#boron,
#silicon,
#germanium,
#arsenic,
#antimony,
#tellurium,
#polonium {
  background-color: #8ee39c;
}

#aluminium,
#gallium,
#indium,
#tin,
#thalium,
#lead,
#bismuth,
#ununtrium,
#flerovium,
#ununpentium,
#livemorium {
  background-color: #abe3d5;
}

.lanthanoids,
.actinoids {
  position: absolute;
}

.lanthanoids {
  background-color: #ffc3a6;
  top: 530px;
  left: 220px;
}

.actinoids {
  background-color: #f0c6e2;
  top: 600px;
  left: 220px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="typesCont">
    <div class="types info" id="alkali_metals"><a href="#openModal">Alkali Metals</a></div>
    <div class="types info" id="alkaline_earth_metals"><a href="#openModal">Alkaline Earth Metals</a></div>
    <div class="types info" id="transition_metals"><a href="#openModal">Transition Metals</a></div>
    <div class="types info" id="post_transition_metals"><a href="#openModal">Post Transition Metals</a></div>
    <div class="types info" id="metalloids"><a href="#openModal">Metalloids</a></div>
    <div class="types info" id="other_non_metals"><a href="#openModal">Other Non-Metals</a></div>
    <div class="types info" id="halogens"><a href="#openModal">Halogens</a></div>
    <div class="types info" id="noble_gases"><a href="#openModal">Noble Gases</a></div>
    <div class="types info" id="lanths"><a href="#openModal">Lanthanoids</a></div>
    <div class="types info" id="acts"><a href="#openModal">Actinoids</a></div>
    <div class="info" id="metals"><a href="#openModal">Metals</a></div>
    <div class="info" id="non_metals"><a href="#openModal">Non-Metals</a></div>
    <div class="info" id="lanths_space"><a href="#openModal">57-71</a></div>
    <div class="info" id="acts_space"><a href="#openModal">89-103</a></div>
  </div>
  <div class="row1">
    <div class="info" id="hydrogen"><a href="#openModal"><em>1</em>H<p>Hydrogen</p></a></div>
    <div class="info" id="lithium"><a href="#openModal"><em>3</em>Li<p>Lithium</p></a></div>
    <div class="info" id="sodium"><a href="#openModal"><em>11</em>Na<p>Sodium</p></a></div>
    <div class="info" id="potassium"><a href="#openModal"><em>19</em>K<p>Potassium</p></a></div>
    <div class="info" id="rubidium"><a href="#openModal"><em>37</em>Rb<p>Rubidium</p></a></div>
    <div class="info" id="cesium"><a href="#openModal"><em>55</em>Cs<p>Cesium</p></a></div>
    <div class="info" id="francium"><a href="#openModal"><em>87</em>Fr<p>Francium</p></a></div>
  </div>
  <div class="row2">
    <div class="info" id="beryllium"><a href="#openModal"><em>4</em>Be<p>Beryllium</p></a></div>
    <div class="info" id="magnesium"><a href="#openModal"><em>12</em>Mg<p>Magnesium</p></a></div>
    <div class="info" id="calcium"><a href="#openModal"><em>20</em>Ca<p>Calcium</p></a></div>
    <div class="info" id="strontium"><a href="#openModal"><em>38</em>Sr<p>Strontium</p></a></div>
    <div class="info" id="barium"><a href="#openModal"><em>56</em>Ba<p>Barium</p></a></div>
    <div class="info" id="radium"><a href="#openModal"><em>88</em>Ra<p>Radium</p></a></div>
  </div>
  <div class="row3">
    <div class="info" id="scandium"><a href="#openModal"><em>21</em>Sc<p>Scandium</p></a></div>
    <div class="info" id="yttrium"><a href="#openModal"><em>39</em>Y<p>Yttrium</p></a></div>
  </div>
  <div class="row4">
    <div class="info" id="titanium"><a href="#openModal"><em>22</em>Ti<p>Titanium</p></a></div>
    <div class="info" id="zirconium"><a href="#openModal"><em>40</em>Zr<p>Zirconium</p></a></div>
    <div class="info" id="hafnium"><a href="#openModal"><em>72</em>Hf<p>Hafnium</p></a></div>
    <div class="info" id="rutherfordium"><a href="#openModal"><em>104</em>Rf<p>Rutherfordium</p></a></div>
  </div>
  <div class="row5">
    <div class="info" id="vanadium"><a href="#openModal"><em>23</em>V<p>Vanadium</p></a></div>
    <div class="info" id="niobium"><a href="#openModal"><em>41</em>Nb<p>Niobium</p></a></div>
    <div class="info" id="tantalum"><a href="#openModal"><em>73</em>Ta<p>Tantalum</p></a></div>
    <div class="info" id="dubnium"><a href="#openModal"><em>105</em>Db<p>Dubnium</p></a></div>
  </div>
  <div class="row6">
    <div class="info" id="chromium"><a href="#openModal"><em>24</em>Cr<p>Chromium</p></a></div>
    <div class="info" id="molybdenum"><a href="#openModal"><em>42</em>Mo<p>Molybdenum</p></a></div>
    <div class="info" id="tungsten"><a href="#openModal"><em>74</em>W<p>Tungsten</p></a></div>
    <div class="info" id="seaborgium"><a href="#openModal"><em>106</em>Sg<p>Seaborgium</p></a></div>
  </div>
  <div class="row7">
    <div class="info" id="manganese"><a href="#openModal"><em>25</em>Mn<p>Manganese</p></a></div>
    <div class="info" id="technitium"><a href="#openModal"><em>43</em>Tc<p>Technitium</p></a></div>
    <div class="info" id="rhenium"><a href="#openModal"><em>75</em>Re<p>Rhenium</p></a></div>
    <div class="info" id="bohrium"><a href="#openModal"><em>107</em>Bh<p>Bohrium</p></a></div>
  </div>
  <div class="row8">
    <div class="info" id="iron"><a href="#openModal"><em>26</em>Fe<p>Iron</p></a></div>
    <div class="info" id="ruthenium"><a href="#openModal"><em>44</em>R<p>Ruthenium</p></a></div>
    <div class="info" id="osmium"><a href="#openModal"><em>76</em>Os<p>Osmium</p></a></div>
    <div class="info" id="hassium"><a href="#openModal"><em>108</em>Hs<p>Hassium</p></a></div>
  </div>
  <div class="row9">
    <div class="info" id="cobalt"><a href="#openModal"><em>27</em>Co<p>Cobalt</p></a></div>
    <div class="info" id="rhodium"><a href="#openModal"><em>45</em>Rh<p>Rhodium</p></a></div>
    <div class="info" id="iridium"><a href="#openModal"><em>77</em>Ir<p>Iridium</p></a></div>
    <div class="info" id="meitnerium"><a href="#openModal"><em>109</em>Mt<p>Meitnerium</p></a></div>
  </div>
  <div class="row10">
    <div class="info" id="nickel"><a href="#openModal"><em>28</em>Ni<p>Nickel</p></a></div>
    <div class="info" id="palladium"><a href="#openModal"><em>46</em>Pd<p>Palladium</p></a></div>
    <div class="info" id="platinum"><a href="#openModal"><em>78</em>Pt<p>Platinum</p></a></div>
    <div class="info" id="darmstadtium"><a href="#openModal"><em>110</em>Ds<p>Darmstadtium</p></a></div>
  </div>
  <div class="row11">
    <div class="info" id="copper"><a href="#openModal"><em>29</em>Cu<p>Copper</p></a></div>
    <div class="info" id="silver"><a href="#openModal"><em>47</em>Ag<p>Silver</p></a></div>
    <div class="info" id="gold"><a href="#openModal"><em>79</em>Au<p>Gold</p></a></div>
    <div class="info" id="roentgenium"><a href="#openModal"><em>111</em>Rg<p>Roentgenium</p></a></div>
  </div>
  <div class="row12">
    <div class="info" id="zinc"><a href="#openModal"><em>30</em>Zn<p>Zinc</p></a></div>
    <div class="info" id="cadmium"><a href="#openModal"><em>48</em>Cd<p>Cadmium</p></a></div>
    <div class="info" id="mercury"><a href="#openModal"><em>80</em>Hg<p>Mercury</p></a></div>
    <div class="info" id="copernicium"><a href="#openModal"><em>112</em>Cn<p>Copernicium</p></a></div>
  </div>
  <div class="row13">
    <div class="info" id="boron"><a href="#openModal"><em>5</em>B<p>Boron</p></a></div>
    <div class="info" id="aluminium"><a href="#openModal"><em>13</em>Al<p>Aluminium</p></a></div>
    <div class="info" id="gallium"><a href="#openModal"><em>31</em>Ga<p>Gallium</p></a></div>
    <div class="info" id="indium"><a href="#openModal"><em>49</em>In<p>Indium</p></a></div>
    <div class="info" id="thalium"><a href="#openModal"><em>81</em>Ti<p>Thalium</p></a></div>
    <div class="info" id="ununtrium"><a href="#openModal"><em>113</em>Uut<p>Ununtrium</p></a></div>
  </div>
  <div class="row14">
    <div class="info" id="carbon"><a href="#openModal"><em>6</em>C<p>Carbon</p></a></div>
    <div class="info" id="silicon"><a href="#openModal"><em>14</em>Si<p>Silicon</p></a></div>
    <div class="info" id="germanium"><a href="#openModal"><em>32</em>Ge<p>Germanium</p></a></div>
    <div class="info" id="tin"><a href="#openModal"><em>50</em>Sn<p>Tin</p></a></div>
    <div class="info" id="lead"><a href="#openModal"><em>82</em>Pb<p>Lead</p></a></div>
    <div class="info" id="flerovium"><a href="#openModal"><em>114</em>Fl<p>Flerovium</p></a></div>
  </div>
  <div class="row15">
    <div class="info" id="nitrogen"><a href="#openModal"><em>7</em>N<p>Nitrogen</p></a></div>
    <div class="info" id="phosphorus"><a href="#openModal"><em>15</em>P<p>Phosphorus</p></a></div>
    <div class="info" id="arsenic"><a href="#openModal"><em>33</em>As<p>Arsenic</p></a></div>
    <div class="info" id="antimony"><a href="#openModal"><em>51</em>Sb<p>Antimony</p></a></div>
    <div class="info" id="bismuth"><a href="#openModal"><em>83</em>Bi<p>Bismuth</p></a></div>
    <div class="info" id="ununpentium"><a href="#openModal"><em>115</em>Uup<p>Ununpentium</p></a></div>
  </div>
  <div class="row16">
    <div class="info" id="oxygen"><a href="#openModal"><em>8</em>O<p>Oxygen</p></a></div>
    <div class="info" id="sulphur"><a href="#openModal"><em>16</em>S<p>Sulphur</p></a></div>
    <div class="info" id="selenium"><a href="#openModal"><em>34</em>Se<p>Selenium</p></a></div>
    <div class="info" id="tellurium"><a href="#openModal"><em>52</em>Te<p>Tellurium</p></a></div>
    <div class="info" id="polonium"><a href="#openModal"><em>84</em>Po<p>Polonium</p></a></div>
    <div class="info" id="livemorium"><a href="#openModal"><em>116</em>Lv<p>Livemorium</p></a></div>
  </div>
  <div class="row17">
    <div class="info" id="flourine"><a href="#openModal"><em>9</em>F<p>Flourine</p></a></div>
    <div class="info" id="chlorine"><a href="#openModal"><em>17</em>Cl<p>Chlorine</p></a></div>
    <div class="info" id="bromine"><a href="#openModal"><em>35</em>Br<p>Bromine</p></a></div>
    <div class="info" id="iodine"><a href="#openModal"><em>53</em>I<p>Iodine</p></a></div>
    <div class="info" id="astatine"><a href="#openModal"><em>85</em>At<p>Astantine</p></a></div>
    <div class="info" id="ununseptium"><a href="#openModal"><em>117</em>Uux<p>Ununseptium</p></a></div>
  </div>
  <div class="row18">
    <div class="info" id="helium"><a href="#openModal"><em>2</em>He<p>Helium</p></a></div>
    <div class="info" id="neon"><a href="#openModal"><em>10</em>Ne<p>Neon</p></a></div>
    <div class="info" id="argon"><a href="#openModal"><em>18</em>Ar<p>Argon</p></a></div>
    <div class="info" id="krypton"><a href="#openModal"><em>36</em>Kr<p>Krypton</p></a></div>
    <div class="info" id="xenon"><a href="#openModal"><em>54</em>Xe<p>Xenon</p></a></div>
    <div class="info" id="radon"><a href="#openModal"><em>86</em>Rn<p>Radon</p></a></div>
    <div class="info" id="ununoctium"><a href="#openModal"><em>118</em>Uuo<p>Ununoctium</p></a></div>
  </div>
  <div id="lanths" style="height: 0px">
    <div class="lanthanoids info" id="lanthanum"><a href="#openModal"><em>57</em>La<p>Lanthanum</p></a></div>
    <div class="lanthanoids info" id="cerium"><a href="#openModal"><em>58</em>Ce<p>Cerium</p></a></div>
    <div class="lanthanoids info" id="praseodymium"><a href="#openModal"><em>59</em>Pr<p>Praseodymium</p></a></div>
    <div class="lanthanoids info" id="neodymium"><a href="#openModal"><em>60</em>Nd<p>Neodymium</p></a></div>
    <div class="lanthanoids info" id="promethium"><a href="#openModal"><em>61</em>Pm<p>Promethium</p></a></div>
    <div class="lanthanoids info" id="samarium"><a href="#openModal"><em>62</em>Sm<p>Samarium</p></a></div>
    <div class="lanthanoids info" id="europium"><a href="#openModal"><em>63</em>Eu<p>Europium</p></a></div>
    <div class="lanthanoids info" id="gadolinium"><a href="#openModal"><em>64</em>Gd<p>Gadolinium</p></a></div>
    <div class="lanthanoids info" id="terbium"><a href="#openModal"><em>65</em>Tb<p>Terbium</p></a></div>
    <div class="lanthanoids info" id="dysprosium"><a href="#openModal"><em>66</em>Dy<p>Dysprosium</p></a></div>
    <div class="lanthanoids info" id="holmium"><a href="#openModal"><em>67</em>Ho<p>Holmium</p></a></div>
    <div class="lanthanoids info" id="erbium"><a href="#openModal"><em>68</em>Er<p>Erbium</p></a></div>
    <div class="lanthanoids info" id="thulium"><a href="#openModal"><em>69</em>Tm<p>Thulium</p></a></div>
    <div class="lanthanoids info" id="ytterbium"><a href="#openModal"><em>70</em>Yb<p>Ytterbium</p></a></div>
    <div class="lanthanoids info" id="lutetium"><a href="#openModal"><em>71</em>Lu<p>Lutetium</p></a></div>
  </div>
  <div id="acts" style="height:0px">
    <div class="actinoids info" id="actinium"><a href="#openModal"><em>89</em>Ac<p>Actinium</p></a></div>
    <div class="actinoids info" id="thorium"><a href="#openModal"><em>90</em>Th<p>Thorium</p></a></div>
    <div class="actinoids info" id="protactinium"><a href="#openModal"><em>91</em>Pa<p>Protactinium</p></a></div>
    <div class="actinoids info" id="uranium"><a href="#openModal"><em>92</em>U<p>Uranium</p></a></div>
    <div class="actinoids info" id="neptunium"><a href="#openModal"><em>93</em>Np<p>Neptunium</p></a></div>
    <div class="actinoids info" id="plutonium"><a href="#openModal"><em>94</em>Pu<p>Plutonium</p></a></div>
    <div class="actinoids info" id="americium"><a href="#openModal"><em>95</em>Am<p>Americium</p></a></div>
    <div class="actinoids info" id="curium"><a href="#openModal"><em>96</em>Cm<p>Curium</p></a></div>
    <div class="actinoids info" id="berkilium"><a href="#openModal"><em>97</em>Bk<p>Berkilium</p></a></div>
    <div class="actinoids info" id="californium"><a href="#openModal"><em>98</em>Cf<p>Californium</p></a></div>
    <div class="actinoids info" id="einsteinium"><a href="#openModal"><em>99</em>Es<p>Einsteinium</p></a></div>
    <div class="actinoids info" id="fermium"><a href="#openModal"><em>100</em>Fm<p>Fernium</p></a></div>
    <div class="actinoids info" id="mendelivium"><a href="#openModal"><em>101</em>Md<p>Mendlivium</p></a></div>
    <div class="actinoids info" id="nobelium"><a href="#openModal"><em>102</em>No<p>Nobelium</p></a></div>
    <div class="actinoids info" id="lawrencium"><a href="#openModal"><em>103</em>Lr<p>Lawrencium</p></a></div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

我尝试过重置值，摆弄元素的位置但由于某种原因它不起作用。到目前为止我无法找到原因？如何进行任何更改，以便将div固定在其位置。任何提示或帮助表示赞赏。

2 个答案:

答案 0 :(得分：1)

您可以为div及其元素指定％宽度，或者您可以尝试使用bootstrap列来执行此操作，这是制作响应式设计的好方法！

https://getbootstrap.com/examples/grid/

答案 1 :(得分：-1)

您可以尝试在CSS中使用媒体查询来重新调整元素框的大小以适应较小的屏幕。你需要考虑一个不同的移动布局，因为你不会让这个布局在320px宽屏幕上工作，除非你开始隐藏内容，比如全名和数字部分。

@media only screen and (min-width : 768px) {

    #metalloids {
        height: 15px;
        width: 66px;
    }

}

@media only screen and (min-width : 992px) {

    #metalloids {
        height: 30px;
        width: 109px;
    }

}
相关问题
最新问题