最近,我已经研究了很多关于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;
}

07-24 09:43
查看更多