首页 文章

如何将DIV宽度调整为内容

提问于
浏览
34

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

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

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

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

UPDATE

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

4 回答

  • 15

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

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

    .parent{
      width: min-content;
    }
    

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

  • 8

    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;
    
  • 76

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

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

    你有其他选择,你可以 float ,或者设置 position: absolute ,但这些也有布局的其他影响,你需要决定哪一个更适合你的情况 .

  • 1

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

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

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

相关问题