我有一个附加样式的div元素:
.mypost {
border: 1px solid Peru;
font-family: arial;
margin: auto;
min-width: 700px;
width: 700px;
}
我在DIV块内部放置WordPress的帖子内容,但为了简单起见,假设DIV中只有一个 <img>
. 我希望我的div最小宽度为700像素,如果图像宽度超过700像素,则调整宽度 .
我有什么选择来实现这一目标?请指教 .
UPDATE
4 回答
我想在其他答案中添加这个非常新的解决方案:
如果您不希望元素变为内联块,则可以执行以下操作:
支持正在快速增长,所以当edge决定实现它时,它会非常棒:http://caniuse.com/#search=intrinsic
EDIT2- Yea auto填充DOM SOZ!
看看这个小提琴
http://jsfiddle.net/ppumkin/4qjXv/2/
http://jsfiddle.net/ppumkin/4qjXv/3/
和这个页面
http://www.webmasterworld.com/css/3828593.htm
删除了原始答案因为它错了 .
宽度正常 - 但高度重置为0
所以
一种方法是在
div
上设置display: inline-block;
. 它默认为block
元素,它将始终填充它可以填充的宽度(当然,除非指定width
) .inline-block
唯一的缺点是IE只能从版本8正确支持它.IE 6-7只允许在自然inline
元素上设置它,但有hacks to solve this problem .你有其他选择,你可以
float
,或者设置position: absolute
,但这些也有布局的其他影响,你需要决定哪一个更适合你的情况 .您可以尝试使用
float:left;
或display:inline-block;
.这两个都会将元素的行为从默认更改为100%宽度,从而将默认值更改为其内容的自然宽度 .
但请注意,它们也会对周围元素的布局产生影响 . 我建议
inline-block
虽然影响较小,但最好先尝试一下 .