CSS Float Grenze Überlappung Probleme

Ich versuche, ein Menü auf der linken Seite der Seite zu schweben, und wenn es groß genug wird, um den Inhalt unten zu erreichen, stößt Firefox den Inhalt über genau so wie es sollte ... außer für die Rand.CSS Float Grenze Überlappung Probleme

ist hier ein Screenshot mit ein paar Artikel:

Und ein anderer mit mehreren Positionen

"Box 4" wird wie erwartet bewegt über, aber seine Grenze bleibt auf der linken Seite. Oo

HTML:

 
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
     " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head> 
      <title></title> 
      <link rel="stylesheet" href="css/main.css" /> 
     </head> 
     <body> 
      <div id="menu"> 
       <ul> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
        <li>Item</li> 
       </ul> 
      </div> 
      <div id="title"> 
       <img src="img/logo.png" alt="logo" /> 
       <span id="title_text">Title</span> 
      </div> 
      <div id="container"> 
       <div id="box1" class="topbox"> 
        <div class="title">Box 1 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box2" class="topbox"> 
        <div class="title">Box 2 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
       <div id="box3" class="topbox"> 
        <div class="title">Box 3 Title</div> 
        <div class="content">Content goes here</div> 
       </div> 
      </div> 
      <div id="box4"> 
       <div class="title">Box 4 Title</div> 
       <div class="content">Content goes here<br />line break</div> 
      </div> 
     </body> 
    </html>

CSS:

#menu { 
    float: left; 
    width: 100px; 
    padding-left: 0px; 
} 

#menu ul { 
    margin: 0px; 
    padding: 10px; 
} 

#title { 
    margin-left: 100px; 
    border: 1px #F00 dashed; 
    height: 40px; 
    font-size: 20pt; 
} 

#title_text { 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 5px; 
} 

#container { 
    margin-left: 100px; 
} 

.topbox { 
    width: 30%; 
    height: 200px; 
    display: inline-block; 
    margin-top: 5px; 
    margin-bottom: 10px; 
    margin-right: 2px; 
    margin: none; 
    border: 1px #F00 solid; 
} 

.topbox .title { 
    text-align: center; 
    border-bottom: 1px #000 solid; 
    padding-top: 1px; 
} 

.content { 
    padding: 2px; 
} 

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
} 

#box4 .title { 
    display: inline; 
    border-right: 1px #000 solid; 
    border-bottom: 1px #000 solid; 
    padding-left: 2px; 
    padding-right: 2px; 
} 

#box4 .content { 
    display: inline; 
}

Quelle

2009-08-14 Rena

Sie könnten diese doctype.com auf stellen. Es ist besser für diese Art von Fragen geeignet. – Kredns

mögliches Duplikat von [Warum ändert CSS float nicht die Breite des folgenden div?] (Http: // stackoverflow.com/questions/25475822/why-does-css-float-nicht-ändern-die-breite-des-folgenden-div) –

Sie können das Problem beheben, indem Sie Ihre # box4 Regel Aktualisierung wie folgt:

#box4 { 
    border: 1px #000 solid; 
    margin-left: 100px; 
}

bearbeiten # box4 unter einen langen sidenav css:

#box4 { 
    border: 1px #000 solid; 
    clear: both; 
}

Quelle

2009-08-14 02:02:09 Pat

Wenn ich das tue, dann, wenn das Menü wenige Elemente hat, wird es eine nutzlose Lücke auf der linken Seite von Box4. – Rena

Ihre andere, Nicht-Javascript-Option wäre, # Box4 unter einem langen SideNav (bearbeitetes Beispiel) zu schieben Wenn Sie mit Javascript gingen, könnten Sie den Stil von Box4 ändern, wenn das Menü zu lang ist, so dass es reibungslos daneben ging. – Pat

Fügen Sie die folgende Zeile über "box4" Div.

<div style="clear:both;"></div>

Damit Ihr Code wie folgt aussehen sollte:

<div style="clear:both;"></div><!-- including this line clear floats --> 
<div id="box4"> 
<div class="title">Box 4 Title</div> 
<div class="content">Content goes here<br />line break</div> 
</div>

Prost !!!

Quelle

2009-08-14 08:48:35

Das schiebt tatsächlich Box4 unter das Menü. Also habe ich die drei Top-Boxen, und diese riesige Lücke unter ihnen bis zum Ende der Speisekarte. – Rena

Sie konnten die # box4 nach links schwimmen ..

Es würde die Breite von 100% jedoch nicht haben ..

Wie Sie udnerstand dies nicht reparierbar ist, da die Breite von 100% wird immer Chaos etwas hoch ... du kannst es nicht bei 100% Breite haben, aber nicht 100% wenn du es schiebst ...

Quelle

2010-01-31 03:28:00

Ich denke du wirst das nicht mit css alleine machen können, weil du den normalen Fluss bekämpfst. Elemente sind normalerweise übereinander gestapelt und versuchen, jemanden zu bitten, sich aus dem Weg zu bewegen, während Sie die Seite hinuntergehen, ist nicht so, wie das funktioniert.

Quelle

2010-01-31 04:07:52 Rob

box4 sollte in seinem css eine clear:both; Eigenschaft haben. Es sollte den Trick machen. Ich habe es gerade getestet und es macht was du willst.

#box4 { 
    border: 1px #000 solid; 
    width: 100%; 
    clear:both; 
}

Quelle

2010-01-31 04:14:49

Sie die box4 außerhalb Container verpasst. Sie können das folgende Snippet überprüfen.

#menu { 
 
    float: left; 
 
    width: 100px; 
 
    padding-left: 0px; 
 
} 
 

 
#menu ul { 
 
    margin: 0px; 
 
    padding: 10px; 
 
} 
 

 
#title { 
 
    margin-left: 100px; 
 
    border: 1px #F00 dashed; 
 
    height: 40px; 
 
    font-size: 20pt; 
 
} 
 

 
#title_text { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-top: 5px; 
 
} 
 

 
#container { 
 
    margin-left: 100px; 
 
} 
 

 
.topbox { 
 
    width: 30%; 
 
    height: 200px; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-bottom: 10px; 
 
    margin-right: 2px; 
 
    margin: none; 
 
    border: 1px #F00 solid; 
 
} 
 

 
.topbox .title { 
 
    text-align: center; 
 
    border-bottom: 1px #000 solid; 
 
    padding-top: 1px; 
 
} 
 

 
.content { 
 
    padding: 2px; 
 
} 
 

 
#box4 { 
 
    border: 1px #000 solid; 
 
    width: 100%; 
 
} 
 

 
#box4 .title { 
 
    display: block; 
 
    border-right: none; 
 
    border-bottom: 1px #000 solid; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    text-align:center; 
 
    
 
} 
 

 
#box4 .content { 
 
    display: inline; 
 
}

<?xml version="1.0" encoding="UTF-8"?> 
 
    <!DOCTYPE html PUBLIC 
 
     "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
     <head> 
 
      <title></title> 
 
      <link rel="stylesheet" href="css/main.css" /> 
 
     </head> 
 
     <body> 
 
      <div id="menu"> 
 
       <ul> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
        <li>Item</li> 
 
       </ul> 
 
      </div> 
 
      <div id="title"> 
 
       <img src="img/logo.png" alt="logo" /> 
 
       <span id="title_text">Title</span> 
 
      </div> 
 
      <div id="container"> 
 
       <div id="box1" class="topbox"> 
 
        <div class="title">Box 1 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box2" class="topbox"> 
 
        <div class="title">Box 2 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box3" class="topbox"> 
 
        <div class="title">Box 3 Title</div> 
 
        <div class="content">Content goes here</div> 
 
       </div> 
 
       <div id="box4"> 
 
       <div class="title">Box 4 Title</div> 
 
       <div class="content">Content goes here<br />line break</div> 
 
      </div> 
 
      </div> 
 
      
 
     </body> 
 
    </html>

Quelle

2018-01-23 09:50:21

Antwort

Verwandte Themen