HTML/CSS 中的响应式元素周期表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16761736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 08:46:36 来源:igfitidea点击:
Responsive Periodic Table of Elements in HTML/CSS
提问by Tyler McGinnis
Lately, I've been studying a lot about responsive design in HTML/CSS and decided to try to code the periodic table of elements in HTML/CSS in order to practice. I have the basic structure of the table (Using mostly divelements) but I'm majorly lacking a responsive flow. I've tried using % and it's still being stubborn. Any nudge in the right direction would be greatly appreciated.
最近，我一直在研究HTML/CSS中的响应式设计，并决定尝试用HTML/CSS编写元素周期表以进行练习。我有表格的基本结构（主要使用div元素），但我主要缺乏响应流程。我试过使用 % 但它仍然很顽固。任何朝着正确方向的推动将不胜感激。
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> Periodic Table of Elements, in CSS! </title>
</head>
<body>
<section>
<div id="container">
<div id="panelOne">
<div class="box"> H </div>
<div class="box"> Li </div>
<div class="box"> Na </div>
<div class="box"> K </div>
<div class="box"> Rb </div>
<div class="box"> Cs </div>
<div class="box"> Fr </div>
</div>
<div id="panelTwo">
<div class="box"> Be </div>
<div class="box"> Mg </div>
<div class="box"> Ca </div>
<div class="box"> Sr </div>
<div class="box"> Ba </div>
<div class="box"> Ra </div>
</div>
<div class="panelThree">
<div class="box"> Sc </div>
<div class="box"> Y </div>
<div class="box"> X </div>
<div class="box"> X </div>
</div>
<div class="panelThree">
<div class="box"> Ti </div>
<div class="box"> Zr </div>
<div class="box"> Hf </div>
<div class="box"> Rf </div>
</div>
<div class="panelThree">
<div class="box"> V </div>
<div class="box"> Nb </div>
<div class="box"> Ta </div>
<div class="box"> Db </div>
</div>
<div class="panelThree">
<div class="box"> Cr </div>
<div class="box"> Mo </div>
<div class="box"> W </div>
<div class="box"> Sg </div>
</div>
<div class="panelThree">
<div class="box"> Mn </div>
<div class="box"> Tc </div>
<div class="box"> Re </div>
<div class="box"> Bh </div>
</div>
<div class="panelThree">
<div class="box"> Fe </div>
<div class="box"> Ru </div>
<div class="box"> Os </div>
<div class="box"> Hs </div>
</div>
<div class="panelThree">
<div class="box"> Co </div>
<div class="box"> Rh</div>
<div class="box"> Ir </div>
<div class="box"> Mt </div>
</div>
<div class="panelThree">
<div class="box"> Ni </div>
<div class="box"> Pd </div>
<div class="box"> Pt </div>
<div class="box"> Ds </div>
</div>
<div class="panelThree">
<div class="box"> Cu </div>
<div class="box">Ag </div>
<div class="box"> Au </div>
<div class="box"> Rg </div>
</div>
<div class="panelThree">
<div class="box"> Zn </div>
<div class="box"> Cd </div>
<div class="box"> Hg </div>
<div class="box"> Cn </div>
</div>
<div class="panelFour">
<div class="box"> B </div>
<div class="box"> Al </div>
<div class="box"> Ga </div>
<div class="box"> In </div>
<div class="box"> Ti </div>
<div class="box"> Uut </div>
</div>
<div class="panelFour">
<div class="box"> C </div>
<div class="box"> Si </div>
<div class="box"> Ge </div>
<div class="box"> Sn </div>
<div class="box"> Rb </div>
<div class="box"> Fl </div>
</div>
<div class="panelFour">
<div class="box">N </div>
<div class="box">P </div>
<div class="box">As </div>
<div class="box">Sb </div>
<div class="box"> Bi </div>
<div class="box"> Uup </div>
</div>
<div class="panelFour">
<div class="box"> O </div>
<div class="box"> S </div>
<div class="box"> Se </div>
<div class="box"> Te </div>
<div class="box"> Po </div>
<div class="box"> Lv </div>
</div>
<div class="panelFour">
<div class="box"> F </div>
<div class="box"> Cl </div>
<div class="box"> Br </div>
<div class="box"> I </div>
<div class="box"> At </div>
<div class="box"> Uus </div>
</div>
<div id="panelFive">
<div class="box"> He </div>
<div class="box"> Ne </div>
<div class="box"> Ar </div>
<div class="box"> Kr </div>
<div class="box"> Xe </div>
<div class="box"> Rn </div>
<div class="box"> Uuo </div>
</div>
</div>
<div id="lowerContainer">
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
<div class="bottom">
<div class="box"> La </div>
<div class="box"> Ac </div>
</div>
</div>
</section>
</body>
</html>
CSS:
CSS：
body{
font-size: 16px;
}
section{
width: 1500px;
max-width: 90%;
margin: 0px auto;
}
#container{
width: 1400px;
}
.box{
border: 3px solid black;
max-width: 50px;
max-height: 50px;
padding: 10px;
line-height: 50px;
text-align: center;
font-size: 1.63em;
}
#panelOne{
float: left;
}
#panelTwo{
float: left;
position: relative;
top: 75px;
}
.panelThree{
float: left;
position: relative;
top: 225px;
}
.panelFour{
float: left;
position: relative;
top: 75px;
}
#panelFive{
float: left;
}
#lowerContainer{
float: right;
margin-top: 20px;
}
.bottom{
float: left;
}
JSFiddle http://jsfiddle.net/cqkAd/
JSFiddle http://jsfiddle.net/cqkAd/
回答by Duncan Walker
I have built a pure-css solution for you here. I got rid of the floats and unnecessary classes, set negative margins on each column to remove the 'double border' effect, used percentage padding to control box height, and removed unnecessary class names (though you can put them back, if you wish). There will be a small margin on the right, which can be removed with a negative margin if you like. Also, I set a minimum width on the table, which can be easily removed. It works in Crome - haven't tested it in other browsers. Let me know if you have any questions. Enjoy!
我在这里为您构建了一个纯 css 解决方案。我去掉了浮点数和不必要的类，在每列上设置负边距以消除“双边框”效果，使用百分比填充来控制框高度，并删除了不必要的类名（尽管你可以把它们放回去，如果你愿意） . 右侧会有一个小边距，如果您愿意，可以使用负边距将其删除。此外，我在桌子上设置了一个最小宽度，可以轻松删除。它适用于 Crome - 尚未在其他浏览器中进行测试。如果您有任何问题，请告诉我。享受！
See the JSfiddlefor the HTML markup. Here is the CSS:
有关HTML 标记，请参阅JSfiddle。这是CSS：
#periodic_table {
width: 100%;
min-width: 600px;
}
#periodic_table > div {
margin-bottom: 2.5%;
}
#periodic_table > div > div {
width: 5.5%;
display: inline-block;
margin-right: -7px;
}
#periodic_table > div > div > div {
border: 3px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
background: red;
margin-top: -3px;
padding: 20% 0;
}
回答by Tyler McGinnis
By using mostly all of your suggestions, I was able to re-create my own fluid layout and I"m pretty happy with the results. Thanks for all your help! Here's the code.
通过使用您的大部分建议，我能够重新创建自己的流畅布局，我对结果非常满意。感谢您的帮助！这是代码。
<!DOCTYPE html>
<html>
<head>
<title> Periodic Table of Elements, in CSS! </title>
<link rel="stylesheet" type="text/css" href="style.css"> <!--Main StyleSheet -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!-- jQUery -->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<section>
<div id="menu"> The Periodic Table of Elements </div>
<div id="container">
<div id="panelOne">
<div class="box"><a href="http://en.wikipedia.org/wiki/Hydrogen"> H </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Lithium"> Li </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Sodium"> Na </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Potassium"> K </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Rubidium"> Rb </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Caesium"> Cs </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Francium"> Fr </a></div>
</div>
<div id="panelTwo">
<div class="box"><a href="http://en.wikipedia.org/wiki/Beryllium"> Be </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Magnesium"> Mg </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Calcium"> Ca</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Strontium"> Sr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Barium"> Ba </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Radium"> Ra </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Scandium"> Sc</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Yttrium"> Y </a></div>
<div class="box"><a href="#"> * </a></div>
<div class="box"><a href="#"> * </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Titanium"> Ti </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Zirconium"> Zr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Hafnium"> Hf </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Rutherfordium"> Rf </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Vanadium"> V </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Niobium"> Nb </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Tantalum"> Ta </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Dubnium"> Db </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Chromium"> Cr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Molybdenum"> Mo </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Tungsten"> W</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Seaborgium"> Sg</a> </div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Manganese"> Mn</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Technetium"> Tc </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Rhenium"> Re </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Bohrium"> Bh </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Iron"> Fe </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Ruthenium"> Ru </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Osmium"> Os </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Hassium"> Hs </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Cobalt"> Co </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Rhodium"> Rh</a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Iridium"> Ir</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Meitnerium"> Mt </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Nickel"> Ni </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Palladium"> Pd </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Platinum"> Pt </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Darmstadtium"> Ds </a></div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Copper"> Cu</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Silver">Ag </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Gold"> Au</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Roentgenium"> Rg</a> </div>
</div>
<div id="panelThree">
<div class="box"><a href="http://en.wikipedia.org/wiki/Zinc"> Zn</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Cadmium"> Cd</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Mercury"> Hg</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Copernicium"> Cn</a> </div>
</div>
<div id="panelTwo">
<div class="box"><a href="http://en.wikipedia.org/wiki/Boron"> B </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Aluminium"> Al</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Gallium"> Ga</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Indium"> In </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Thallium"> Ti </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Ununtrium"> Uut </a></div>
</div>
<div id="panelTwo">
<div class="box"><a href="http://en.wikipedia.org/wiki/Carbon"> C</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Silicon"> Si</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Germanium"> Ge</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Tin">Sn</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Lead">Rb</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Flerovium">Fl</a> </div>
</div>
<div id="panelTwo">
<div class="box"><a href="http://en.wikipedia.org/wiki/Nitrogen">N </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Phosphorus">P </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Arsenic">As</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Antimony">Sb </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Bismuth"> Bi</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Ununpentium"> Uup</a> </div>
</div>
<div id="panelTwo">
<div class="box"> <a href="http://en.wikipedia.org/wiki/Oxygen">O</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Sulfur">S </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Selenium"> Se</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Tellurium">Te</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Polonium">Po </a></div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Livermorium">Lv </a></div>
</div>
<div id="panelTwo">
<div class="box"> <a href="http://en.wikipedia.org/wiki/Fluorine">F </a></div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Chlorine">Cl</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Bromine">Br</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Iodine">I </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Astatine"> At </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Ununseptrium"> Uus</a> </div>
</div>
<div id="panelOne">
<div class="box"> <a href="http://en.wikipedia.org/wiki/Helium">He </a></div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Neon">Ne</a> </div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Argon">Ar </a></div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Krypton">Kr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Xenon"> Xe </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Radon"> Rn </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Ununoctium"> Uuo </a></div>
</div>
</div>
<div id="clear"></div>
<div id="lowerContainer">
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Lanthanum"> La </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Actinium"> Ac </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Cerium"> Ce </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Thorium"> Th </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Praseodymium"> Pr </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Protactinium"> Pa </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Neodymium"> Nd</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Uranium"> U </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Promethium"> Pm </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Neptunium"> Np </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Samarium"> Sm </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Plutonium"> Pu </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Europium"> Eu </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Americium"> Am </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Gadolinium"> Gd </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Curium"> Cm </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Terbium"> Tb</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Berkelium"> Bk</a> </div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Dysprosium"> Dy </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Californium"> Cf </a></div>
</div>
<div class="bottom">
<div class="box"> <a href="http://en.wikipedia.org/wiki/Holmium">Ho </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Einsteinium"> Es</a> </div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Erbium"> Er </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Fermium"> Fm</a> </div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Thulium"> Tm </a></div>
<div class="box"> <a href="http://en.wikipedia.org/wiki/Mendelevium">Md </a></div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Ytterbium"> Yb </a></div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Nobelium"> No</a> </div>
</div>
<div class="bottom">
<div class="box"><a href="http://en.wikipedia.org/wiki/Lutetium"> Lu</a> </div>
<div class="box"><a href="http://en.wikipedia.org/wiki/Lawrencium"> Lr</a> </div>
</div>
</div>
<div id="infoContainer">
This is the information.
</div>
</section>
</body>
CSS:
CSS：
html{
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
body{
background-image: url("bg.png");
}
#menu{
width: 400px;
margin: 0px auto;
webkit-text-shadow: 1px 1px 1px #000;
moz-text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px #000;
font-size: 40px;
}
section {
max-width: 1064px;
margin: 0px auto;
overflow: hidden;
min-width: 300px;
}
#infoContainer {
position: absolute;
left: 43%;
width: 500px;
top: 78px;
text-align: center;
margin-left: -250px;
}
#container {
width: 100%;
}
#container:before,
#container:after {
content:"";
display:table;
}
#container:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#container {
zoom:1;
}
.box{
border: 1px solid black;
padding: 20%;
text-align: center;
font-size: 1.63em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 2px;
-webkit-box-shadow: 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px #ccc;
box-shadow: 1.5px 2px 2px #000;
text-shadow: 1px 1px 1px #ccc;
}
.box a{
text-decoration: none;
color: inherit;
}
.box:hover{
box-shadow: 1px 1px 1px #ccc;
cursor: pointer;
text-shadow: 1px 1px 1px #000;
}
#panelOne{
float: left;
width: 5.5556%;
}
#panelTwo{
float: left;
width: 5.5556%;
margin-top: 6%;
}
#panelThree{
float: left;
width: 5.5556%;
margin-top: 18%;
}
#lowerContainer{
float: right;
margin-top:1%;
width: 80%;
}
.bottom{
float: left;
width: 6.66666667%;
}
@media screen and (max-width: 1000px){
#panelTwo{
margin-top: 6.3%;
}
#panelThree{
margin-top: 18.9%;
}
}
@media screen and (max-width: 900px){
#panelTwo{
margin-top: 6.8%;
}
#panelThree{
margin-top: 20.5%;
}
}
@media screen and (max-width: 800px){
.box{
font-size: 1em;
}
#panelTwo{
margin-top: 5.7%;
}
#panelThree{
margin-top: 17%;
}
}
@media screen and (max-width: 700px){
#panelTwo{
margin-top: 6.2%;
}
#panelThree{
margin-top: 19%;
}
}
@media screen and (max-width: 550px){
.box{
font-size: .5em;
}
#panelTwo{
margin-top: 5.5%;
}
#panelThree{
margin-top: 15.8%;
}
#menu{
width: 300px;
font-size: 28px;
}
#infoContainer {
top: 50px;
}
}
@media screen and (max-width: 400px){
#panelTwo{
margin-top: 7.3%;
}
#panelThree{
margin-top: 21.6%;
}
}
#clear{
clear: both;
}
jQuery:
jQuery：
$(document).ready(function () {
var $ic = $('#infoContainer');
$ic.hide();
$('.box').click(function () {
var newLink = $(this).find('a').attr('href');
var left = ($(window).width()/2)-(600/2),
top = ($(window).height()/2)-(400/2),
popup = window.open (newLink, "Element", "width=600, height=400, top="+top+", left="+left);
return false;
}); //End box click
}); //End ready
}); //结束准备
回答by mclaassen
If you just want the boxes the get smaller then you need to make the width of your panel# classes have % width.
如果你只是想让盒子变小，那么你需要让你的 panel# 类的宽度有 % 的宽度。
回答by Pier-Luc Gendreau
You need to use percent based widths like so:
您需要使用基于百分比的宽度，如下所示：
#container{
width: 100%;
}
.box{
border: 3px solid black;
max-width: 50px;
max-height: 50px;
padding: 10px;
line-height: 50px;
text-align: center;
font-size: 1.63em;
}
.panel{
/* 100% divided by number of vertical panels */
width: 5.5%;
}
Here's a fiddle with slightly tweaked HTML and full CSS:
这是一个带有稍微调整的 HTML 和完整 CSS 的小提琴：
It gets ugly at lower widths so you will want to add a fixed min-width(in px) and adjusting paddingwill help too.
它在较低的宽度下变得丑陋，因此您需要添加一个固定的min-width（以 px 为单位）并且调整padding也会有所帮助。
As a side note, don't use spaces for padding and be consistent in your use of idand class.
作为一个侧面说明，不要使用空格进行填充，并在您使用的一致性id和class。
