多列CSS佈局

我很難嘗試使這種佈局以我想要的方式工作。正如你所看到的4列出現在包裝div的外面，我不知道爲什麼。此外，列將填充一個查詢，所以我需要他們的高度是靈活的，但最後我需要所有列出現相同的高度。多列CSS佈局

這裏是佈局直播www.onlinesportcenter.com

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; 
      width:80%; 
      height: 24px; 
      vertical-align:top; 
      padding:0; 
      margin:0 auto 0 auto; 
      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; 
     } 

     .main-multi-form-column { 
      background: #efefef; 
      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: 3px 0 0 0; 
      text-align:center; 
      vertical-align:top; 
      width:175px; 
     } 

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

     } 

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

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

     .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; 
      text-align:center; 
     } 


     .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-18 user1212592

您的代碼患有嚴重_divitis_。 – elclanrs 2012-02-18 23:57:49

你需要清除浮動大功告成了。

在包裝的末尾添加<div style="clear:both"></div>。

來源

2012-02-18 23:56:10 Petah

它添加到.main-multi-form-events

overflow:hidden; 
zoom:1; /*for IE*/

這樣做是爲了每一個有浮動孩子容器。它使得容器環繞着那些浮動的孩子。而且，對一個不應該纏繞浮動兄弟的元素做這件事。

來源

2012-02-19 00:10:17 Joseph

優秀！它工作得很好。但是，我如何讓所有專欄甚至是高度？ – user1212592 2012-02-19 00:18:36

稱爲* faux-columns *的技術將使列看起來像是具有相同的高度（它們不會是真的，它只是一個視覺技巧）。否則，不要使用浮點數，而是使用'vertical-align：top'（和容器上的display：table'）顯示：table-cell'：這將適用於IE8 + – FelipeAls 2012-02-19 00:47:46

我將更改上傳到www.onlinesportcenter。但即使在添加display：table-cell之後......它不想展開。 – user1212592 2012-02-19 00:55:07

回答

相關問題