Right Float und Container div

Ich habe 3 Divs in einem Container Div. Der erste ist links schwebend, der zweite schwebt rechts und der letzte sitzt in der Mitte. Dies erzeugt 3 ungefähr gleiche Divs über ein Container-Div.Right Float und Container div

In jedem dieser Divs platziere ich ein Bild mit verschiedenen Höhen. Dann gibt es ein separates div, das unter dem Container-div sitzt, das die volle Breite hat (nenne es Beschreibung div).

Ich möchte das Container Div auf Höhe des größten Bild div so dehnen, dass die Beschreibung div sitzt schön unter den Bildern. Momentan funktioniert das, wenn die linke schwebt und mittlere divs das größte Bild enthalten, aber nicht für das rechte floated div. Ich kann nicht sehen, warum oder was ich vermisse jede Hilfe würde sehr geschätzt werden.

HINWEIS: Ich versuche dies zu tun, ohne absolute Werte zu verwenden, nur Prozentsätze. Also möchte ich dem Container div keine absolute Höhe deklarieren! Clear's funktioniert auch nicht, da dies vereinfacht ist und es gibt tatsächlich eine Menge anderer div-Container um all dies usw., es sei denn, Sie können nur die Floats in dem obigen verschachtelten div löschen.

Hier ist der Code:

<html> 
<head> 
    <style> 
     #b_pics { 
      border: 2px solid grey; 
      width: 100%; 
     } 
     #b_pic1 { 
      border: 0px solid grey; 
      float:left; 
      width:33%; 
     } 
     #b_pic2 { 
      border: 0px solid grey; 
      margin: 0px auto; 
      width: 33% 
     } 
     #b_pic3 { 
      border: 0px solid grey; 
      float:right; 
      width:33%; 
     } 
     #b_website { 
      border: 1px solid grey; 
      width:100%; 
     } 
    </style> 
</head> 
<body> 
    <div id='b_pics'> 
     <div id='b_pic1'> 
      Image 1 here  
     </div> 
     <div id='b_pic3'> 
      Image 3 here    
     </div> 
     <div id='b_pic2'> 
      Image 2 here      
     </div> 
    </div> 
    <div id='b_website'> 
     Line of text goes here 
    </div> 
</body>

Vielen Dank im Voraus für jede Hilfe, jedes Haar zu halten versuchen, in meinem Kopf thats, links!

Quelle

2009-03-30 Anonymous

Sieht so aus, als wäre jemand auf einer Downvoting-Tour gewesen und hat die Frage und alle Antworten abgelehnt. Seltsam. – SpoonMeiser

-1

Geben Sie this eine Aufnahme. Nichts ist hart codiert, und es sollte tun, was Sie wollen.

Quelle

2009-03-30 21:20:19

Ein enthaltenes Element wird nicht gedehnt, um schwimmende divs aufzunehmen. In Ihrem Beispiel hat das containing div keinen tatsächlichen Inhalt und ist daher 0 Pixel hoch. Versuchen Sie, die Rand- oder Hintergrundfarbe zu ändern, um dies zu veranschaulichen.

Sie können ein Element zwingen, unter irgendwelchen schwebenden divs zu sein, indem sie den Stil geben:

clear: both;

Sie können auch klar, nur nach links oder rechts Floating divs.

Sie können nach Ihren drei Bilddivs, die diesen Stil haben, ein leeres div hinzufügen, um den b_pics-Container zur Aufnahme der schwebenden Elemente zu strecken, oder Sie können einfach das b_website-div deaktivieren.

Quelle

2009-03-30 21:22:05 SpoonMeiser

danke für die Kommentare, ich versuche, sie arbeiten scheint scheint ich bin sehr nahe.Ich werde detaillierteren Code veröffentlichen, wenn ich weiterhin Probleme habe. THnaks –

Ich stimme völlig mit SpoonMeiser Antwort. Ich hatte das gleiche Problem (nur mit IE do) und ein klares hinzufügen: beide (div in meinem Fall) ist die einzige Lösung, die zu funktionieren scheint.

Quelle

2009-11-05 07:08:26

Die Erklärung von SpoonMeiser ist korrekt. Hier ist ein Code, der für Sie arbeiten sollte. Im Wesentlichen habe ich ein leeres Div mit "clear: both" am Ende des Container-Divs hinzugefügt. Dadurch wird der Container gezwungen, den Platz der darin enthaltenen schwebenden Divs zu belegen.

Das ist besser, als das #b_website-div "clear: both" (SpoonMeisers alternativer Vorschlag) zu machen, weil dadurch das #b_website-div an der richtigen Stelle angezeigt würde, aber der #b_pics-Rahmen nicht die schwebenden divs umgab.

<div id='b_pics'> 
    <div id='b_pic1'> 
     Image 1 here</div> 
    <div id='b_pic3'> 
     Image 3 here 
    </div> 
    <div id='b_pic2'> 
     Image 2 here 
    </div> 
    <div style="clear:both;"></div> 
</div> 
<div id='b_website'> 
    Line of text goes here 
</div>

Ich hoffe, dass hilft?

Quelle

2013-07-30 11:48:10 Flam

Antwort

Verwandte Themen