如何调整DIV宽度到内容 [英] How can I adjust DIV width to contents

问题描述

我有一个带有样式的div元素：

  .mypost {
 border： 
 font-family：arial; 
 margin：auto; 
 min-width：700px; 
 width：700px; 
} 
  

我在DIV块中显示WordPress的帖子内容，在DIV中只有一个< img> 。我想要我的div至少700像素宽，如果图像宽度大于700像素，调整宽度。

我的选择是什么？请咨询。

更新

Fiddle
http://jsfiddle.net/cpt_comic/4qjXv/

上设置 display：inline-block; div 。默认情况下是一个 block 元素，它将始终填充它可以填充的宽度（除非指定 width 。

inline-block 的唯一缺点是IE只从版本8正确支持它。IE 6-7只允许自然地设置 inline 元素，但有 hacks来解决这个问题。

还有其他选项，你可以 float 它，或设置 position：absolute 就可以了，但这些对布局也有其他影响，你需要决定哪一个更适合你的情况。

• inline-block jsFiddle演示

I have a div element with style attached:

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

I am diplaying WordPress post contents inside the DIV block but for simplicity let assume that there is only one <img> inside the DIV. I want my div to be minimum 700 px wide and adjust the width if image is wider than 700 px.

What are my options to achieve that? Please advice.

UPDATE

See my Fiddle http://jsfiddle.net/cpt_comic/4qjXv/

解决方案

One way you can achieve this is setting display: inline-block; on the div. It is by default a block element, which will always fill the width it can fill (unless specifying width of course).

inline-block's only downside is that IE only supports it correctly from version 8. IE 6-7 only allows setting it on naturally inline elements, but there are hacks to solve this problem.

There are other options you have, you can either float it, or set position: absolute on it, but these also have other effects on layout, you need to decide which one fits your situation better.

• inline-block jsFiddle Demo

这篇关于如何调整DIV宽度到内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！