1. 홈
  2. 질의 응답
  3. CSS 레이아웃의 짝수 열

CSS 레이아웃의 짝수 열

2012-02-19 4 views
1

이 레이아웃의 열을 같은 높이로 만들려고했습니다. 열은 쿼리에 의해 채워 지므로 높이가 동적이어야하지만 맨 아래에는 모두 짝수가되고 싶습니다.CSS 레이아웃의 짝수 열

누군가 도와주세요.

내가 당신의 열이 동일한 높이를 만들기 위해 jQuery를 사용하는 것이 좋습니다 거라고 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>

출처

2012-02-19 user1212592

답변

1

라이브. 페이지로 바로 이동할 수있는 기사 및 예제 코드는이 링크를 참조하십시오.

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

출처

2012-02-19 01:36:16

+0

해당 스크립트는 스마트 폰에서 사용할 수 있습니까? – user1212592

+0

예, jQuery와 그 코드가 스마트 폰에서 정상적으로 실행됩니다. 걱정없이 사용할 수 있습니다. –

+0

감사합니다 내 남자 – user1212592

관련 문제

 관련 문제