Question

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

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

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

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

更新

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

Answer 1

实现此目的的一种方法是在display: inline-block;上设置div。它默认为block元素，它将始终填充它可以填充的宽度（当然，除非指定width）。

inline-block唯一的缺点是IE只能从版本8正确支持它.IE 6-7只允许在自然inline元素上设置它，但有hacks to solve this problem。< / p>

您还有其他选项，可以float，或者设置position: absolute，但这些也会对布局产生其他影响，您需要确定哪种选择更适合您的情况。

inline-block jsFiddle Demo

Answer 2

您可以尝试使用float:left;或display:inline-block;。

这两个都会将元素的行为从默认值更改为100％宽度，以默认为其内容的自然宽度。

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

Answer 3

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

如果您不希望元素成为内联块，则可以执行以下操作：

.parent{
  width: min-content;
}

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

Answer 4

EDIT2- Yea auto填充DOM SOZ！

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

看看这个小提琴

<击> http://jsfiddle.net/ppumkin/4qjXv/2/

http://jsfiddle.net/ppumkin/4qjXv/3/

和本页

http://www.webmasterworld.com/css/3828593.htm

删除了原始答案，因为它错了。

宽度正常 - 但高度重置为0

所以

 min-height: 400px;

Answer 5

尝试width: max-content通过div的内容调整div的宽度。

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

如何将DIV宽度调整为内容

5 个答案: