HTML: Div ist nicht von Bildgröße betroffen

Ich habe ein Div eingerichtet, aber das Bild innerhalb es überschreitet seine Grenzen aufgrund float:left. Alles möglich, um das zu beheben?HTML: Div ist nicht von Bildgröße betroffen

Hier ist mein Code:

<html> 
<head></head> 
<body> 
<div style='width:600px;min-height:50px;border:1px solid black;padding:5px;'> 
<img src='pic.jpg' style='border:1px solid #C0C0C0;padding:5px;float:left;height:150px;width:150px;'> 
<div> 
<p>There are a lot of things </p> 
</div> 
</div> 
</body> 
</html>

Quelle

2012-04-02 Ali

Klar der Schwimmer: http://stackoverflow.com/questions/6328080/methods-of-clearing-floats-effects –

Verwenden overflow:hidden Mutter div

Quelle

2012-04-02 00:47:45 Dips

OK, ich bin nicht ganz sicher, was Sie fordern, also wenn dies ist eine falsche Antwort, die ich im Voraus entschuldigen, aber Änderung:

<img src='pic.jpg' style='border:1px solid C0C0C0;padding:5px;float:left;height:150px;width:150px;'>

An:

<img src='pic.jpg' style='border:1px solid #C0C0C0;margin:5px;float:left;height:150px;width:150px;'>

Beim Auffüllen wird normalerweise die Breite des übergeordneten Containers vergrößert.

Quelle

2012-04-02 00:49:02

Wenn das umschließende Feld erweitert werden soll, damit es in das Bild passt, löschen Sie den Float.

Nur wenige Beispiele für die Reinigung des Schwimmers: http://jsfiddle.net/MJK4u/1/

Fortgeschrittenere Techniken (empfohlen) für Floats Clearing: methods of clearing float's effects

Wenn Sie den Überlauf verbergen wollen, overflow-hidden verwenden. Wenn Sie möchten, dass der Überlauf blättert, overflow-scroll.

Quelle

2012-04-02 00:49:43

<html> 
    <head></head> 
    <body> 
    <div style='width:600px;min-height:50px;border:1px solid black;padding:5px;'> 
     <img src='pic.jpg' style='border:1px solid #C0C0C0;padding:5px;float:left;height:150px;width:150px;'> 
     <div> 
     <p>There are a lot of things </p> 
     </div> 
     <br style="clear:both;"/>   <!-- the addition --> 
    </div> 
    </body> 
</html>

Quelle

2012-04-02 01:12:49

Hallo Sie können so wie u mit zwei tun

Es zwei Lösung dieses Problems sind.

denken Sie Ihre Eltern Überlauf versteckt definieren kann, weil dieses Problem Zusammenbruch Marge ist

als lik dieses

css

.parent{ 
    width:600px; 
    min-height:50px; 
    border:solid 1px black; 
    overflow:hidden; 
} 
img{ 
    display:inline-block; 
    border:solid 1px #c0c0c0; 
    padding:5px; 
    height:150px; 
    width:150px; 
    margin:10px; 
} 

.child{ 
    display: inline-block; 
    vertical-align: top; 
}

HMTL

<div class="parent"> 
<img src='pic.jpg' alt="sample img"> 
<div class="child"> 
<p>There are a lot of things </p> 
</div> 
</div>

Live-Demo click here http://jsfiddle.net/rohitazad/awEDY/1/

oder

ist, dass Sie Anzeige inline-block von yout img-Tag und Kind div als ähnliche

definieren css

.parent{ 
    width:600px; 
    min-height:50px; 
    border:solid 1px black; 
    overflow:hidden; 
} 
img{ 
    float:left; 
    border:solid 1px #c0c0c0; 
    padding:5px; 
    height:150px; 
    width:150px; 
    margin:10px; 
} 

.child{ 

}

HMTL

<div class="parent"> 
<img src='pic.jpg' alt="sample img"> 
<div class="child"> 
<p>There are a lot of things </p> 
</div> 
</div>

Live-demo http://jsfiddle.net/rohitazad/awEDY/3/

Quelle

2012-04-02 04:48:18

HTML: Div ist nicht von Bildgröße betroffen

Antwort

Verwandte Themen