如何将DIV宽度调整为内容

Question

我有一个附加样式的div元素:

.mypost {
    border: 1px solid Peru;
    font-family: arial;
    margin: auto;
    min-width: 700px;
    width: 700px;
}

我在DIV块内部放置WordPress的帖子内容,但为了简单起见,假设<img>DIV中只有一个.我希望我的div最小宽度为700像素,如果图像宽度超过700像素,则调整宽度.

我有什么选择来实现这一目标？请指教.

UPDATE

看我的小提琴 http://jsfiddle.net/cpt_comic/4qjXv/

Answer 1

你可以做到这一点的方法之一是设置display: inline-block;上div.它默认是一个block元素,它将始终填充它可以填充的宽度(除非指定width当然).

inline-block唯一的缺点是IE只能从版本8正确支持它.IE 6-7只允许在自然inline元素上设置它,但有一些黑客可以解决这个问题.

你还有其他选择,你可以选择float它,也可以设置position: absolute它,但是这些选项对布局也有其他影响,你需要决定哪种选择更适合你的情况.

Answer 2

我想在其他答案中添加这个非常新的解决方案:

如果您不希望元素变为内联块,则可以执行以下操作:

.parent{
  width: min-content;
}

支持正在快速增长,所以当边缘决定实现它时,它会非常棒:http://caniuse.com/#search=intrinsic

Answer 3

你可以尝试使用float:left;或display:inline-block;.

这两个都会将元素的行为从默认更改为100%宽度,以默认为其内容的自然宽度.

但请注意,它们也会对周围元素的布局产生影响.我建议虽然inline-block会产生较小的影响,所以最好先尝试一下.

Answer 4

EDIT2- 是的，自动填充 DOM SOZ！

#img_box{        
    width:90%;
    height:90%;
    min-width: 400px;
    min-height: 400px;
}

看看这个小提琴

和这个页面

删除了原来的答案，因为它是错误的。

宽度没问题，但高度重置为 0

所以

 min-height: 400px;