Html佈局，並有正文內容延伸超過設定的寬度，並保持在同一行

我有一個頁眉，頁腳，正文內容的佈局。這是一個非常標準的佈局。我們的報告有時會超過硬編碼寬度「但我們需要左側導航欄和正文內容到同一行。在下面的HTML代碼中，如果寬度延伸得太遠（例如，主體中有超過900+寬度的內容），則主體內容會在左側導航欄下面流動。Html佈局，並有正文內容延伸超過設定的寬度，並保持在同一行

基本上，我們希望內容和左側導航保持在同一行上，而不管該內容部分實際上有多少內容。有沒有辦法強制瀏覽器始終保持這些項目在同一行。

<html> 
    <head> 
     <title>Test</title> 

     <style type="text/css"> 

      #bodyFull { 

      } 

      #header { 
       border: 3px solid #f00; 
       background-color: #99F; 
       width: 900px; 
      } 

      #footer { 

       border: 3px solid #909; 
       background-color: #F99; 
       width: 900px; 

      } 

      #leftNav { 
       float: left; 
       width: 150px; 
       height: 800px; 
       border: 2px solid #777; 
       background-color: #FF9; 
      } 

      #bodyContent { 
       float: left; 

       border: 2px solid #707; 
       background-color: #AAA; 

       width: 1024px; 
       height: 1024px; 
          overflow: hidden 

      } 

      #mainBody { 

       width: 920px; 
      } 


     </style> 

    </head> 

    <body> 

     <div id="bodyFull"> 

      <div id="header"> 
       The Header 
      </div> 

      <div id="mainBody"> 

       <div id="leftNav"> 
        Left Nav 
       </div> 

       <div id="bodyContent"> 
        The Body 
       </div> 

       The End of Main Body 

      </div> 
      <div style="clear: both"></div> 
      <div id="footer"> 
       The Footer 
      </div> 

     </div> 

    </body> 

</html>

小錯字：bodyContent與leftNav位於同一行。

/* !!!可以將此部分留在同一行左側導航欄中，即使它延伸過「頁眉/ BODYFULL」寬 */

來源

2009-07-10 Berlin Brown

好吧，忘記我margin-left建議，誤解的問題。如果你想確保div總是比如說750px（所以加左邊的導航欄的寬度和頁眉的寬度相同），然後將它的寬度設置爲750px，並設置overflow: auto在頁面的那一部分添加一個滾動條必要的，或overflow: hidden截斷它。

來源

2009-07-10 15:27:06

近了，但我沒有做一個小錯字例如，如果你複製粘貼上面的代碼，並嘗試這個在IE中。身體坐在左側導航下，是否有辦法避免這種情況。 – 2009-07-10 18:23:16

劃傷我以前說過的話，我誤解了你。嘗試下面的代碼，並讓我知道，如果這是你在找什麼。否則，你需要更具體的你需要什麼。但是，你可能想看看這個liquid layout，然後用一個設定的寬度在它周圍放一個包裝div。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Test</title> 

    <style type="text/css"> 

      #bodyFull { 
      } 

      #header { 
        border: 3px solid #f00; 
        background-color: #99F; 
        width: 900px; 
      } 

      #footer { 

        border: 3px solid #909; 
        background-color: #F99; 
        width: 900px; 

      } 

      #leftNav { 
        float: left; 
        width: 150px; 
        height: 800px; 
        border: 2px solid #777; 
        background-color: #FF9; 
      } 

      #bodyContent { 
        float: left; 
        border: 2px solid #707; 
        background-color: #AAA; 
              width:748px; 
        height: 1024px; 
              overfloat:auto; 
      } 

      #mainBody { 
              width:906px; 
              overfloat: auto; 
      } 


    </style> 

</head> 

<body> 

    <div id="bodyFull"> 

      <div id="header"> 
        The Header 
      </div> 

      <div id="mainBody"> 

        <div id="leftNav"> 
          Left Nav 
        </div> 

        <div id="bodyContent"> 
          The Body 
        </div> 

        The End of Main Body 

      </div> 
      <div style="clear: both"></div> 
      <div id="footer"> 
        The Footer 
      </div> 

    </div> 

</body>

來源

2009-07-10 19:47:36 Patcouch22

Html佈局，並有正文內容延伸超過設定的寬度，並保持在同一行

回答

相關問題