Hintergrund, der nicht hinter schwebenden divs angezeigt wird

Was ist mit diesem Code falsch?Hintergrund, der nicht hinter schwebenden divs angezeigt wird

Der Hintergrund verschwindet hinter den divs, wenn ich float: left zu #text und #text2 hinzufüge. Aber wenn ich die float: left entferne, sieht alles gut aus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#first{ 
width: 200px; 
background-color: #345752; 
} 
#left_b{ 
background:transparent url('img/left.png'); 
background-position: left top; 
background-repeat: repeat-y; 
    min-height: 30px; 
} 
#right_b{ 
background:transparent url('img/right.png'); 
background-position: right top; 
background-repeat: repeat-y; 
} 
#text{ 
float: left; 
width: 50px; 
height: 30px; 
} 
#text2{ 
float: left; 
width: 70px; 
height: 30px; 
} 
</style> 
</head> 
<body> 
<div id = "first"> 
    <div id = "left_b"> 
     <div id = "right_b"> 
     <div id = "text">text 1</div> 
     <div id = "text2">text 2</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Quelle

2010-04-12 lolalola

Sie Container div #right_b kollabiert, weil seine Kinder schweben. Sie können dies mit der "Clear-Fix" -Technik beheben. Sie können die folgenden Stack-Überlauf Post für ein paar Lösungen prüfen wollen:

Which method of ‘clearfix’ is best?

Eine beliebte Lösung ist overflow: hidden zu Ihrem div-Container hinzuzufügen: #right_b:

#right_b { 
    background:transparent url('img/right.png'); 
    background-position: right top; 
    background-repeat: repeat-y; 
    overflow: hidden; 
}

Eine andere allgemeine ist, eine <div style="clear: both;"> </div> vor dem Schließen Ihres Containers div hinzuzufügen:

<div id="first"> 
    <div id="left_b"> 
     <div id="right_b"> 
     <div id="text">text 1</div> 
     <div id="text2">text 2</div> 
     <div style="clear: both;">&nbsp;</div> 
     </div> 
    </div> 
</div>

Quelle

2010-04-12 16:57:10

Ich glaube, Sie haben #right_b auch eine minimale Höhe geben:

#right_b{ 
background:transparent url('img/right.png'); 
background-position: right top; 
background-repeat: repeat-y; 
min-height: 30px; 
}

Float-Elemente aus dem normalen Dokumentenfluss nehmen, also, wenn ein Element nicht andere „normale“ Elemente enthält, dieses Element eine Höhe von 0 (da es keinen Inhalt hat).

Quelle

2010-04-12 17:01:33

Fügen Sie diese auf Ihrem Stylesheet:

.group:before, 
.group:after { 
    content:""; 
    display:table; 
} 
.group:after { 
    clear:both; 
} 
.group { 
    zoom:1; /* For IE 6/7 (trigger hasLayout) */ 
}

und die Klasse "Gruppe" zu Ihrem "right_b" Element hinzufügen, wird dies das Kollabieren div beheben:

<div id = "right_b" class="group"> 
    <div id = "text">text 1</div> 
    <div id = "text2">text 2</div> 
    </div>

Quelle

2012-05-11 06:03:47

Hintergrund, der nicht hinter schwebenden divs angezeigt wird

Antwort

Verwandte Themen