甚至列在css布局中

时间：2012-02-19 01:31:39

标签： css layout

我一直试图让这个布局中的列高度相同。列将由查询填充，因此它们需要在高度上是动态的，但在底部我希望它们都是均匀的。

请有人帮忙！

住一个www.onlinesportcenter

CODE 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>layout</title>
<style>
body {

    margin:0;
    border:0;
    padding:0;
    height:100%;
    max-height:100%;
    background:#01245c;
    font-family:arial, verdana, sans-serif;
    font-size:75%;
    overflow: hidden;

}


* html body {

    padding:116px 0 20px 0;

}

.header-wrap {

    position:absolute;
    top:0;
    height:116px;
    width:100%;
}

.header-wrap #header{

    margin:0 auto;
    position:relative;

}

#header {
    background: #666;
    position:absolute;
    top:0;
    left:0;
    width:1020px;
    height:116px;
    text-align:center;
    padding:0;
    margin:0;

}

* html #header {height:116px;}



.container-wrap {

    position:absolute;
    width:100%;
    height:auto;
    margin-top:116px;
    margin-bottom:20px;
    top:0;
    bottom:0;
}

.container-wrap #container {

    margin:0 auto;
    position:relative;
    top:0;
    height:100%;
}

#container {

    font-family: Arial, sans-serif;
    font-size: 1em;
    position:fixed;
    top:116px;
    left:0;
    bottom:20px;
    right:0;
    background:#fff;
    padding:0;
    width:1020px;

}

* html #container {

    height:100%;
    width:1020px;

}

#container img {margin:0;}


#main {
    background:#fff;
    width:790px;
    height:100%;
    float:left;  
    overflow:auto;
}

.main-multi-form {
    background:#efefef;
    width:764px;
    margin:4px;
    border:1px solid #adadad;
    vertical-align:top; 
}

.main-multi-form-bettype {
    background:#ddd;
    height: 50px;
    margin:8px 8px 0 8px;
    padding: 14px 0 0 0;
    text-align:center;
    vertical-align:top; 
}

.main-multi-form-bettype-extra {
    background:#dddddd;
    height: 24px;
    vertical-align:top; 
    padding:0 0 6px 0;
    margin:0 8px 0 8px;
    text-align:center;
}

.main-multi-form-events {
    background:#ddd;
    margin:8px 8px 8px 8px;
    padding-top: 5px;
    text-align:center;
    vertical-align:top;
    width: 748px;
    overflow:hidden;
    zoom:1; /*for IE*/
}

.main-multi-form-column {
    background: #ccc;
    float:left;
    width:177px;
    margin: 5px;
}

.main-multi-form-sports{
    background:#fff;
    border:1px solid #666;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-weight:bold;
    height: 18px;
    padding: 0;
    text-align:center;
    vertical-align:middle;
    width:175px;
}

.main-multi-form-leagues{
    padding: 0;
    text-align:left;
    vertical-align:top;
    width:177px;
    height:22px;

}

.main-multi-form-leagues-double{
    padding: 0;
    text-align:left;
    vertical-align:top;
    width:177px;    
    height:32px;
}

.main-multi-form-leagues-triple{
    padding: 0;
    text-align:left;
    vertical-align:top;
    width:177px;    
    height:44px;
}

.main-multi-form-leagues-checkbox{
    float:left;
    margin: 0;
    padding: 0 0 0 3px;
    vertical-align:top;
    width:17px; 
}

.main-multi-form-leagues-league{
    float:right;
    margin: 0;
    padding: 2px 0 0 0;
    vertical-align:top;
    width:157px;
}

.main-multi-form-leagues-league a,a:Hover,a:Visited{
    color: #369;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    font-weight:bold;
    text-decoration:none;
}

#right {

    width:228px;
    height:100%;
    float:right;  
    border-left:1px solid #73a2bd;
    border-right:1px solid #73a2bd;
}


.footer-wrap{
    position:absolute;
    bottom:0;
    height:20px;
    width:100%;

}

.footer-wrap #footer{

    position:relative;
    margin:0 auto;
} 

#footer {
  background: #666;
  position:absolute;
  bottom:0;
  left:0;
  width:1020px;
  height:19px;
  overflow:auto;
  text-align:center;
  border-top:1px solid #35759a;

}

* html #footer {height:20px;}

#footer p {

  color:#fff;
  font-size:1em;
  margin:2px 0 0 0;

}

form {
    margin:0;
    padding:0;
}

select {

    font-family: Arial,sans-serif;
    font-size:1em;
    color:#000000;
    margin:0;
    padding:0;
    vertical-align:top;
    font-size: 1em;
}

input {

    font-family: Arial,sans-serif;
    font-size:1em;
    color:#000000;
    margin:0;
    padding:0;
    vertical-align:top;
    font-size: 1em;
}


hr
{
    width:100%;
    color: #000000;
    height: 1px;
}
</style>

</head>

<body>

<div class="header-wrap">  

    <div id="header">

        HEADER

    </div>

</div>

<div class="container-wrap">

    <div id="container">

        <div id="main">


            <div class="main-multi-form">



                            <div class="main-multi-form-bettype">

                                    TOP MAIN

                            </div>


                            <div class="main-multi-form-events">


                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 1</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 2</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 3</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>
                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>
                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                                    <div class="main-multi-form-column">


                                            <div class="main-multi-form-sports">Column 4</div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                            <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                           <div class="main-multi-form-leagues">

                                                <div class="main-multi-form-leagues-checkbox">

                                                        <input class="Selection-Checkbox" type="checkbox" name="checkbox">

                                                </div>
                                                <div class="main-multi-form-leagues-league"><a href="#">CHECKBOX</a></div>

                                            </div>

                                    </div>

                            </div>



            </div>


        </div>

        <div id="right">
            <br /><br />
            RIGHT

        </div>

    </div>

</div>

<div class="footer-wrap">

    <div id="footer">FOOTER</div>

</div>


</body>

</html>

1 个答案:

答案 0 :(得分：1)

我建议使用jquery使列高度相等。请参阅此链接，查看您可以直接进入页面的文章和示例代码。

http://www.cssnewbie.com/equal-height-columns-with-jquery/

相关问题
最新问题