Question

最近，我一直在研究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/

Answer 1

我为您构建了一个纯css解决方案 here 。我删除了浮点数和不必要的类，在每列上设置负边距以删除“双边框”效果，使用百分比填充来控制框高度，并删除不必要的类名称（如果您愿意，可以将它们放回去）。右边会有一个小的边距，如果你愿意，可以用负边距删除。另外，我在桌子上设置了最小宽度，可以轻松移除。它适用于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;
}

Answer 2

如果你只是希望盒子变小，那么你需要让面板的宽度#class有％宽度。

Answer 3

您需要使用基于百分比的宽度，如下所示：

#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%;
}

这是一个轻微调整HTML和完整CSS的小提琴：

http://jsfiddle.net/cqkAd/1/

在较低的宽度下变得难看，因此您需要添加固定的min-width（以px为单位），调整padding也会有所帮助。

作为旁注，请勿使用空格进行填充，并且在使用id和class时保持一致。

Answer 4

通过大部分使用您的建议，我能够重新创建自己的流体布局，我对结果非常满意。感谢您的帮助！这是代码。

http://jsfiddle.net/KjgfV/

<!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：

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：

$(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

}）; //结束准备

HTML / CSS中的响应元素周期表

4 个答案: