Überlauf des CSS-Inhalts mit div

Derzeit besteht ein Problem mit einigen DIVs, die ihre DIVs überlappen. Siehe Bild unten (die drei Produkte an der Unterseite):Überlauf des CSS-Inhalts mit div

alt text

der All Körper Inhalt der Seite innerhalb des #content DIV gehalten:

div#content { 
    width: 960px; 
    float: left; 
    background-image: url("../img/contentBg.png"); 
    background-repeat: repeat; 
    margin-top: 10px; 
    line-height: 1.8em; 
    border-top: 8px solid #5E88A2; 
    padding: 10px 15px 10px 15px; 
}

Und hier ist die CSS für die Produktkästen in der #content div:

.upper { 
    text-transform: uppercase; 
} 
.center { 
    text-align: center; 
} 
div#products { 
    float: left; 
    width: 100%; 
    margin-bottom: 25px; 
} 
div.productContainer { 
    float: left; 
    width: 265px; 
    font-size: 1em; 
    margin-left: 50px; 
    height: 200px; 
    padding-top: 25px; 
    text-align: right; 
} 

div.product { 
    float: left; 
    width: 200px; 
} 
div.product p { 
} 
div.product a { 
    display: block; 
} 
div.product img { 
    float: left; 
} 
div.product img:hover { 
    opacity: 0.8; 
    filter: alpha(opacity = 80); 
} 
div.transparent { 
    opacity: 0.8; 
    filter: alpha(opacity = 80); 
}

Und hier ist der HTML-Code für die Boxen:

 <div class="productContainer"> 
      <div class="product"> 
       <h2 class="upper center">A2 Print</h2> 

       <a href='../edit/?productId=5&amp;align=v' class='upper'>     <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a> 
       <p class="upper">16.5 inches x 23.4 inches<br /><strong>&pound;15.99</strong></p> 
       <p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span>     </em></p> 

       <p><a href='../edit/?productId=5&amp;align=v' class='upper'><span>Select</span></a></p>     
      </div> 

     </div> 

     <div class="productContainer"> 
      <div class="product transparent"> 
       <h2 class="upper center">A1 Print</h2> 
       <a href='../edit/?productId=11&amp;align=v' class='upper'>     <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a> 
       <p class="upper">23.4 inches x 33.1 inches<br /><strong>&pound;19.99</strong></p> 
       <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span>     </em></p> 


       <p><a href='../edit/?productId=11&amp;align=v' class='upper'><span>Select</span></a></p>      
      </div> 
     </div> 

     <div class="productContainer"> 
      <div class="product transparent"> 
       <h2 class="upper center">Poster Print (60cm x 80cm)</h2> 
       <a href='../edit/?productId=12&amp;align=v' class='upper'>     <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a> 
       <p class="upper">23.6 inches x 31.5 inches<br /><strong>&pound;13.95</strong></p> 

       <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span>     </em></p> 

       <p><a href='../edit/?productId=12&amp;align=v' class='upper'><span>Select</span></a></p>      
      </div> 
     </div>

Jede Idee, was diese DIVs überlappen könnte? Was ich möchte ist, dass alle Felder wie erwartet in das #container div passen. Es macht mich verrückt!

Prost

Quelle

2011-01-17 kaese

Haben Sie versucht, auf die #content in die Fußzeile

clear:both;

Auch auf Set

overflow:hidden;

Quelle

2011-01-17 16:46:47 stecb

Danke steweb - Hinzufügen der folgenden hat es gelöst: Hinzufügen von Überlauf: versteckt; div # products und Einstellung div.productContainer auf Höhe: auto; Prost! – kaese

Nachdem versucht wurde, ein Layout mit einer Höhe von 100% (wie oben) und einer dynamisch überfüllten Liste zu beheben, war dies die einzige Lösung, die aus Dutzenden von SO-Versuchen bestand. Danke, mein lieber Herr! Ich verstehe, warum '' clear: both'' funktioniert, aber ich wünschte, ich wüsste, warum '' overflow: hidden'' funktioniert für den Inhalt div, während nicht den eigentlichen überlaufenden Text des Kindes div. CSS so komplex: / – antimatter

Hinzufügen Überlauf: auto; in Ihrem CSS Inhalt div :)

Quelle

2011-01-17 16:45:36 benhowdle89

würde nicht hinzufügen, dass eine Bildlaufleiste zum Inhalt div? Überlauf: versteckt ist wahrscheinlich eine bessere Idee. –

Etwas viele Leute ist clearfix genannt verwenden. Hier ist der Code:

.clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
} 
.clearfix {display:inline-block;} 
/* Hide from IE Mac \*/ 
    .clearfix {display:block;} 
/* End hide from IE Mac */

Um dies zu verwenden, fügen Sie einfach die Klasse Clearfix Container. Sie werden es wahrscheinlich zu was auch immer hinzufügen div enthält alle "productContainer"

Quelle

2011-01-17 19:48:05 jsweazy

Überlauf des CSS-Inhalts mit div

Antwort

Verwandte Themen