代码之家 › 专栏 › 技术社区 › raldi

如何防止DIV展开以占用所有可用宽度?

css html

raldi · 技术社区 · 16 年前

在下面的HTML中,我希望图像周围的框架是舒适的——而不是拉伸并占用父容器中所有可用的宽度。我知道有几种方法可以做到这一点(包括一些可怕的事情,比如手动将其宽度设置为特定的像素数),但是 正确的 方式?

编辑: 一个答案建议我关闭“display:block”,但这会导致在我测试过的每一个浏览器中呈现的格式都不正确。有没有办法在关闭“display:block”的情况下获得好看的渲染效果?

编辑: 如果我将“float:left”添加到PictureFrame中,并将“clear:both”添加到P标记中,那么它看起来很棒。但我并不总是希望这些框架向左浮动。有没有更直接的方法来完成“浮动”正在做的事情?

.pictureframe {
  display: block;
  margin: 5px;
  padding: 5px;
  border: solid brown 2px;
  background-color: #ffeecc;
}
#foo {
  border: solid blue 2px;
  float: left;
}
img {
  display: block;
}

<div id="foo">
  <span class="pictureframe">
       <img alt=''
        src="http://stackoverflow.com/favicon.ico" />
  </span>
  <p>
    Why is the beige rectangle so wide?
  </p>
</div>

5 回复 | 直到 7 年前

Simon Sarris 7 年前

这个 正确的 方法是使用:

.pictureframe {
    display: inline-block;
}

编辑: 浮动元素也会产生相同的效果,这是因为浮动元素使用相同的 shrink-to-fit 确定宽度的算法。

neouser99 16 年前

米色矩形非常宽,因为在跨度上有display:block,将内联元素转换为块元素。块元素应该占用所有可用的宽度,而内联元素则不会。尝试从CSS中删除display:block。

Atanas Korchev 16 年前

将“float:left”添加到span.pictureframe选择器可以解决这个问题,因为“float:left”的作用是:)除了其他所有浮动元素之外,元素向左移动将使其只占用其内容所需的空间。下面的任何块元素(例如“p”)都将围绕“浮动”元素浮动。如果您“清除”了“p”的浮动,它将遵循正常的文档流,从而低于span.pictureframe。实际上,您需要“clear:left”,因为元素是“float:left”-ed。对于更正式的解释,您可以检查CSS规范,尽管它超出了大多数人的理解。

Abhishek Pandey 8 年前

是的 display:inline-block 是你的朋友。还可以看看: display:-moz-inline-block 和 display:-moz-inline-box .

-2

Keeth 16 年前

我能够在浏览器中可靠地制作图片框架的唯一方法是动态设置宽度。下面是使用jquery的示例:

$(window).load(function(){
  $('img').wrap('<div class="pictureFrame"></div>');
  $('div.pictureFrame').each(function(i) {
    $(this).width($('*:first', this).width());
  });
});

即使您事先不知道图像尺寸,这也会起作用,因为它会在添加图片框之前等待图像加载(注意,我们使用的是$(window).load而不是更常见的$(document).ready)。它有点难看,但很管用。

以下是此示例的PictureFrame CSS:

.pictureFrame {
  background-color:#FFFFFF;
  border:1px solid #CCCCCC;
  line-height:0;
  padding:5px;
}

我希望看到一个可靠的,跨浏览器,只有CSS的解决方案这个问题。这个解决方案是我在过去的一个项目中为使它只使用CSS和HTML而感到沮丧之后想到的。