Question

我已经设置了一个div，但是由于float:left，它内部的图像超出了限制。有什么可以解决这个问题吗？

这是我的代码：

<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>

Answer 1

将overflow:hidden用于父div

Answer 2

<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>

Answer 3

好的，我不完全确定你在问什么，所以如果这是一个错误的答案，我会事先道歉，但改变：

    <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;'>

填充通常会扩展父容器的宽度，因此请尝试边距。

Answer 4

如果您希望展开包含框以适合图像，请清除浮动。

清除浮动的几个例子：http://jsfiddle.net/MJK4u/1/

用于清除浮动元素的更高级技术（推荐）：methods of clearing float's effects

如果要隐藏溢出，请使用overflow-hidden。如果您想要滚动溢出，overflow-scroll。

Answer 5

嗨，你可以像你一样做两件事

这个问题有两个解决方案。

认为你可以定义隐藏的父溢出，因为这是崩溃边际问题

喜欢这个

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>

直播演示click here http://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>

直播demo http://jsfiddle.net/rohitazad/awEDY/3/

HTML：Div不受图像大小的影响

5 个答案: