如何float：left一个容器有一个相对宽度的图像？ [英] How to float:left a container with an image having a relative width?

问题描述

我试图向左对齐一个宽度相对于页面宽度的图片。有几个不幸的约束，我不能改变：

• 图片有一个包装，


• 我不能将宽度应用于封装，因为负责宽度的类应用于图片（我不能改变它：D），

结构如下所示：

 < p> Lipsum ...< / p> 
 
< div class =align-left> 
< img src =http://lorempixel.com/1000/1000/class =width50alt =lipsumwidth =1000height =1000> 
< / div> 
 
< p> Lipsum ...< / p> 
  

CSS：

 code> .align-left {
 float：left; 
 background：red; 
 padding：10px; 
} 
 
 .width50 {
 width：50％; 
 height：auto; 
} 
  

请参阅： http://jsfiddle.net/xnt27crz/2/

问题：是否可以以不占用100％宽度的方式设置 div.align-left 的样式？

更多事实：

• 我最近得到的是浮动图像，而不是div（所以它是0px高），但它是可怕的，导致其他问题。


• 我认为这可以


• 我正在寻找一个安全解决方案，因为它将被许多开发人员在许多情况下使用，我不能
：

• 编辑：真实情况要复杂得多，您可以在此处查看示例： http://jsfiddle.net/n1kayb2o/3/ 。请注意，编辑器中的结构与输入HTML不同。还有额外的包装器，它将图形和拖动手柄，以及一些其他可能需要的元素（例如重叠）粘合在一起。

解决方案

艰难的问题。我不得不阅读规格来帮助你，这里是我的结果。

这是不可能的解决给定约束的问题，因为它

为什么？

让我们读一下规范 http://www.w3.org/TR/CSS2/visudet .html＃float-width

如果margin-left或margin-right '，它们的使用值为'0'。

如果'width'被计算为'auto'，使用的值是shrink-to-fit width。

计算收缩适配宽度类似于使用自动表布局算法计算表格单元格的宽度。粗略地：通过格式化内容而不破坏发生明显换行的位置来计算优选宽度，并且还计算优选最小宽度，例如通过尝试所有可能的换行符。 CSS 2.1没有定义确切的算法。第三，找到可用的宽度：在这种情况下，这是包含块的宽度减去'margin-left'，'border-left-width'，'padding-left'，'padding-right' 'border-right-width'，'margin-right'和任何相关滚动条的宽度。

：min（max（首选最小宽度，可用宽度），首选宽度）。

 首选最小宽度= 1000px（图像的实际宽度）
可用宽度=假设1990页面宽度）
首选宽度= 1000px（图像的实际宽度）
 
 min（max（1000，1990），1000）= 1000 
  

作为证据 http：// jsfiddle .net / xnt27crz / 5 / with 200px image

摘要

在您的情况下，浮动的div将获得等于图像的实际宽度的宽度。

I'm trying to align to the left an image with a width which is relative to the page width. There are couple of unfortunate constraints which I cannot change:

• the image has a wrapper,
• I cannot apply width to the wrapper because class responsible for the width is applied to the image (and I cannot change that too :D),
• the solution must be CSS-only.

The structure looks like this:

<p>Lipsum...</p>

<div class="align-left">
    <img src="http://lorempixel.com/1000/1000/" class="width50" alt="lipsum" width="1000" height="1000">
</div>

<p>Lipsum...</p>

CSS:

.align-left {
    float: left;
    background: red;
    padding: 10px;
}

.width50 {
    width: 50%;
    height: auto;
}

See: http://jsfiddle.net/xnt27crz/2/

Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.

More facts:

• The closest I got was to float the image, not the div (so it is 0px high), but it was awful and caused other issues.
• I think that this can be achieved with flexbox, but I'm looking for IE9+ support.
• I'm looking for a "safe" solution because it will be then used by many developers in many scenarios that I cannot predict.
• Edit: The real case is much more complicated, hence the constraints. You can see the example here: http://jsfiddle.net/n1kayb2o/3/. Note that the structure inside the editor is different than the input HTML. There's additional wrapper which glues together the figure and the drag handle that it has and some other elements that may be needed (e.g. an overlay).

解决方案

Tough problem. I had to read the spec to help you out and here is my result.

It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")

Why?

Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width

If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

Lets do the "math" for your case

Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)

min(max(1000, 1990), 1000) = 1000

As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image

Summary

In your case the floated div will get the width equal to the real width of the image.

这篇关于如何float：left一个容器有一个相对宽度的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！