divを設定しましたが、内部の画像がfloat:leftのため制限を超えています。これを修正するために可能なことは何ですか？ここでHTML：divは画像サイズによって影響を受けません
は私のコードです：
<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>
使用overflow:hidden親のdiv
OKに、私はあなたが求めているものを全くわからないので、これは間違った答えである場合、私は事前に謝罪、しかし、変更：
<img src='pic.jpg' style='border:1px solid C0C0C0;padding:5px;float:left;height:150px;width:150px;'>
へ：
<img src='pic.jpg' style='border:1px solid #C0C0C0;margin:5px;float:left;height:150px;width:150px;'>
通常、パディングは親コンテナの幅を広げるため、マージンを試してください。
イメージに収まるように格納するボックスを展開する場合は、フロートをクリアします。フロートをクリアする
いくつかの例：浮いた要素をクリアするためのhttp://jsfiddle.net/MJK4u/1/
より高度な技術（推奨）：methods of clearing float's effects
あなたがオーバーフローを非表示にしたい場合は、overflow-hiddenを使用しています。オーバーフローをスクロールする場合は、overflow-scroll。
<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>
こんにちは、あなたがこの問題の解決策2がありますuのような
ように2つのことを行うことができます。
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
012リクとしてあるので、あなたがあなたの親オーバーフローが隠れて定義することができると思います
<div class="parent">
<img src='pic.jpg' alt="sample img">
<div class="child">
<p>There are a lot of things </p>
</div>
</div>
ライブデモclick herehttp://jsfiddle.net/rohitazad/awEDY/1/
または
としてyoutはimgタグと子のdivの表示インラインブロックを定義することができますです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>
クリアフロート：http://stackoverflow.com/questions/6328080/methods-of-clearing-floats-effects –