最近,我已经研究了很多关于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/
最佳答案
我为您here构建了一个纯CSS解决方案。我摆脱了浮点数和不必要的类,在每列上设置负边距以消除“双边框”效果,使用百分比填充来控制框的高度,并消除了不必要的类名(尽管您可以将它们放回去,如果需要的话) 。右侧会有一个很小的边距,如果您愿意,可以用负边距将其删除。另外,我在桌子上设置了最小宽度,可以轻松删除它。它可以在Crome中使用-尚未在其他浏览器中对其进行过测试。如果您有任何疑问,请告诉我。请享用!
有关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;
}