- 首页
- 前端开发
- 强制 div 来容纳图像(最小高度不起作用)?
强制 div 来容纳图像(最小高度不起作用)?
[英] Force div to accomidate image (min-height not working)?
本文介绍了强制 div 来容纳图像(最小高度不起作用)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一堆 div，一个接一个，每个里面都有一个图像.当我将 min-height 设置为高于图像高度的值时，一切正常:
但是如果我将它设置为 50px 而图像为 100+px，图像会有点级联"
如何强制 div 至少与其中的图像一样高?
CSS
body {背景:#cccccc；边距:0px；}一种 {文字装饰:无；颜色:#333333；}一个:悬停{文字装饰:下划线；}.回复 {最小高度:50px；填充:10px；背景色:#eeeeee；字体大小:14px；边距:10px；}.邮政 {填充顶部:10px；/*背景颜色:#ff0000；*/}.postimage {向左飘浮;padding-right: 10px;}.发表评论 {}
HTML
<头><link rel="stylesheet" href="main.css"/><身体><div class="回复">一<div class="post"><img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png"/>
<div class="回复">二<div class="post"><img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png"/>
<div class="回复">三<div class="post"><img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png"/>
<div class="回复">四<div class="post"><img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png"/>
</html>
解决方案
将 clear: left 添加到您的 div.
看到了吗?
.postimage {向左飘浮;padding-right: 10px;}
当您浮动 div 的内容时，div 不会垂直拉伸以适应.
所以，添加这个:
.reply {最小高度:50px；填充:10px；背景色:#eeeeee；字体大小:14px；边距:10px；清除:左；}
将解决问题.
替代解决方案我倾向于使用的另一个解决方案是使用 overflow hack，而不是 clear:
.reply {最小高度:50px；填充:10px；背景色:#eeeeee；字体大小:14px；边距:10px；宽度:100%；溢出:隐藏；}
您会期望这会隐藏 div 下方的图像部分，但它有不同的结果:overflow: hidden 不会隐藏内容，而是导致 div 拉伸以包含整个图像.
注意:要使此方法在旧浏览器上运行，您必须指定宽度(请注意，我在上面的 css 中添加了该宽度).
I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine:
But if I have it set to 50px while the image is 100+px, the images kind of "cascade"
What can I do to force the div to be at least as tall as the image inside it?
CSS
body {
background: #cccccc;
margin: 0px;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
}
.post {
padding-top: 10px;
/*background-color: #ff0000;*/
}
.postimage {
float: left;
padding-right: 10px;
}
.postcomment {
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="reply">
One
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Two
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Three
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Four
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
</body>
</html>
解决方案
Add clear: left to your div.
See this?
.postimage {
float: left;
padding-right: 10px;
}
When you float the contents of the div, the div does not stretch vertically to accommodate.
So, adding this:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
clear: left;
}
Will resolve the issue.
Alternate solution
Another solution which I tend to prefer is to use the overflow hack, rather than clear:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
width: 100%;
overflow: hidden;
}
You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.
Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).
这篇关于强制 div 来容纳图像(最小高度不起作用)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
