Question

我需要一个带边框的div来包围任意大小的固定宽度内容（这意味着我不知道固定宽度是什么，它会在页面之间变化）。

下面的html做了我在IE 6中所期望的，也就是说，如果你将浏览器窗口的大小缩小到小于内容的宽度（在这种情况下是固定宽度<p>，但它可以是任何固定宽度的内容），带边框的div在内容的右边缘处停止缩小。但是，在IE 7（和FF）中，边框继续缩小以保持在浏览器窗口的宽度内，向后移动并显示内容。

有没有办法让div缩小并随浏览器窗口一起增长，但是从来没有宽度小于内容？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>
    <title>Border Test</title>
  </head>

  <body>
    <div style="border: 1px #0000FF solid;padding:3px;">
      <p style="width:700px;">
        Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Praesent varius mi a leo
        ultrices consequat. Nam id venenatis ligula. 
        Suspendisse et faucibus eros. Donec quis 
        augue eu nunc cursus blandit vel vel odio.
        Suspendisse rutrum aliquet massa, eu ultricies
        elit laoreet a. Curabitur feugiat cursus.
      </p>
    </div>
  </body>
</html>

更新：我在IE 8中做了一些讨论，display:table样式声明中的<div>修复了它。

<div style="border: 1px #0000FF solid;padding:3px;display:table;">

有没有办法在IE 7中模拟display:table？

Answer 1

将“overflow：auto”添加到父div，所以......

<div id="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;">  should make it work.

这样，您就拥有了CSS可以提供的最佳解决方案。现在，至于你的powerusers，根据它的子div，使用jquery的这一位给父div一个合适的宽度。

请注意，我给你的div一个类，所以我可以轻松地定位它们。

<body>
    <div class="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;">
      <p style="width:700px;">
        Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Praesent varius mi a leo
        ultrices consequat. Nam id venenatis ligula. 
        Suspendisse et faucibus eros. Donec quis 
        augue eu nunc cursus blandit vel vel odio.
        Suspendisse rutrum aliquet massa, eu ultricies
        elit laoreet a. Curabitur feugiat cursus.
      </p>
    </div>
<script type="text/javascript">
$(function(){
   $('.parentDiv').each(function(){
      var newWidth = $(this).find('p:first').width();
      $(this).width(newWidth);
   });
});

</script>
  </body>

Answer 2

考虑使用min-width：

<div style="border: 1px solid rgb(0, 0, 255); padding: 3px; min-width: 700px;">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius mi a leo ultrices consequat. Nam id venenatis ligula. Suspendisse et faucibus eros. Donec quis augue eu nunc cursus blandit vel vel odio. Suspendisse rutrum aliquet massa, eu ultricies elit laoreet a. Curabitur feugiat cursus. </p>
</div>

IE-6并未正式支持最小宽度，但您可以在Google上找到许多解决方法。

Answer 3

div上的

display: inline;可以满足您的需求：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>
    <title>Border Test</title>
  </head>

  <style>
    div.expanding {
      display: inline;
      background-color: cyan;
      border: 1px solid blue;
    }
  </style>

  <body>
    <div class="expanding">
      <p style="width:700px;">
        Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Praesent varius mi a leo
        ultrices consequat. Nam id venenatis ligula. 
        Suspendisse et faucibus eros. Donec quis 
        augue eu nunc cursus blandit vel vel odio.
        Suspendisse rutrum aliquet massa, eu ultricies
        elit laoreet a. Curabitur feugiat cursus.
      </p>
    </div>
  </body>
</html>

我注意到我必须提供的Internet Explorer 7虚拟机上的一些文物。背景颜色表现如预期。

展开div以适应IE 6和7中的固定宽度内容

3 个答案: