Html Layout und haben den Körper Inhalt über die eingestellte Breite hinaus und bleiben auf der gleichen Linie

Ich habe ein Layout mit Kopf, Fußzeile, Körper Inhalt. Es ist ein hübsches Standard-Layout. Wir haben Berichte, die manchmal über die hartcodierte Breite hinausreichen. Aber wir brauchen den linken nav und den Körperinhalt in derselben Zeile. Wenn bei diesem HTML-Code die Breite zu weit reicht (dh es gibt einen Inhalt im Körper, der mehr als 900+ Breite hat), fließt der Körperinhalt unterhalb des linken Navigationsbereichs.Html Layout und haben den Körper Inhalt über die eingestellte Breite hinaus und bleiben auf der gleichen Linie

Grundsätzlich möchten wir, dass der Inhalt und das linke nav in der gleichen Zeile bleiben, unabhängig davon, wie viel Inhalt tatsächlich in diesem body content-Abschnitt ist. Gibt es eine Möglichkeit, den Browser zu zwingen, diese auf Elemente in der gleichen Zeile IMMER zu halten.

<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>

Kleiner Tippfehler: Bodycontent in der gleichen Zeile wie die leftNav zur Ruhe.

/* !!! DIESER ABSCHNITT bleibt auf der gleichen Zeile wie die linken Nav CAN, auch wenn es vorbei an der ‚TTI/BODYFULL‘ width EXTENDS */

Quelle

2009-07-10 Berlin Brown

Ok, vergessen meinen margin-left Vorschlag, falsch verstanden, das Problem. Wenn Sie sicherstellen möchten, dass div immer etwa 750px ist (so dass das linke nav die gleiche Breite wie der Header hat), legen Sie die Breite auf 750px fest und setzen Sie overflow: auto, um eine Bildlaufleiste auf dem Teil der Seite hinzuzufügen notwendig, oder overflow: hidden, um es einfach zu kürzen.

Quelle

2009-07-10 15:27:06

näher, aber ich habe einen kleinen Schreibfehler Zum Beispiel machen, wenn Sie den Code oben kopieren und einfügen und versuchen, diese im Internet Explorer. der Körper sitzt unter dem linken Nav, gibt es einen Weg, dies zu vermeiden. –

Wenn Sie die Breite von # bodyContent auf 750px ändern und der Überlauf automatisch oder ausgeblendet ist, wie ich hier sagte, und #leftNav ist immer noch 150px und #mainBody ist immer noch 920px, dann sollten #leftNav und #bodyContent in derselben Zeile stehen, weil sie passen ihr enthaltender Block. Funktionieren diese Änderungen nicht? –

Scratch was ich schon sagte, ich missverstanden Sie. Probieren Sie den unten stehenden Code aus und lassen Sie mich wissen, ob Sie danach suchen. Andernfalls müssen Sie genauer sein, was Sie brauchen. Vielleicht möchten Sie aber diese liquid layout auschecken und dann ein Wrapper div mit einer festgelegten Breite darum legen.

<!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>

Quelle

2009-07-10 19:47:36 Patcouch22

Html Layout und haben den Körper Inhalt über die eingestellte Breite hinaus und bleiben auf der gleichen Linie

Antwort

Verwandte Themen