最近，我一直在研究 HTML/CSS 中的响应式设计，并决定尝试在 HTML/CSS 中编写元素周期表以进行练习。我有表格的基本结构(主要使用 div 元素)，但我主要缺乏响应流程。我试过使用 % 但它仍然很顽固。任何朝着正确方向的插入都将不胜感激。
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:
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/
最佳答案
我已经为您构建了一个纯 css 解决方案 here 。我摆脱了 float 和不必要的类，在每列上设置负边距以消除“双边框”效果，使用百分比填充来控制框高度，并删除了不必要的类名(如果你愿意，你可以把它们放回去) .右侧会有一个小边距，如果您愿意，可以使用负边距将其移除。另外，我在 table 上设置了一个最小宽度，可以轻松删除。它适用于 Crome - 尚未在其他浏览器中测试过。如果您有任何问题，请告诉我。享受吧!
参见 JSfiddle用于 HTML 标记。这是 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;
}
关于html - HTML/CSS 中的响应式元素周期表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16761736/