複数列の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

あなたのコードには重篤な_脳傷害があります。 – elclanrs

です。

ラッパーの最後に<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

* faux-columns *というテクニックは、列が同じ高さのように見えるようにします（本当にそうではありませんが、視覚的なトリックです）。さもなければ、浮動小数点を使用せずに、 'display：table-cell'を' vertical-align：top'（コンテナの 'display：table'）としてください：IE8 + – FelipeAls

のために動くでしょうwww.onlinesportcenterに変更をアップロードしました。 comが表示されますが、表示した後でも：table-cell ...展開したくありません。 – user1212592

答えて

関連する問題