Question

请参阅下面页面蓝色区域中的注释，了解我要实现的目标。

http://www.a3financial.com/subtitleproblem.php

这里我有2个p是字幕，用蓝色表示，我希望在固定宽度内容区域内尽可能宽，同时尊重任何浮动：左图像的填充/边距。

根据我的理解，当你没有为p设置任何宽度并为float设置一个设置时，这是预期的行为：左..但由于某种原因，我的字幕的背景是在图像后面而不是尊重其利润。也许我的期望是错的。我知道浮子的液体宽度很难/不可能实现。有没有办法做到这一点？

为清楚起见，我希望页面看起来像这样。为了更加清晰，我添加了边框。

http://a3financial.com/images/clarity.png

据我所知，这就是应用于浮点数的所有内容：右：

#content .subtitle {
    padding-top: 2px;
    float: right;
    background-color: #8FD2E3;
    letter-spacing: -1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #969696;
}

以下是float：left：

的代码

img.alignleftimg {
    float: left;
    width: 163px;
    /*margin-right: 30px;F*/
    padding-right: 30px;
}

HTML（需要长拉丁语，需要文字来说明流程）：

<p class="subtitle">Subtitle 1 - should be as wide as possible, respecting the image's padding/margin.</p>
<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<p>nunc nisl velit, fringilla ut ornare non, iaculis in ipsum. Vivamus volutpat quam et dui vestibulum ultricies. Fusce vitae sapien sed ipsum hendrerit dignissim. Lorem ipsum dolor at tellus. Etiam vitae ligula non ante iaculis. Curabitur elementum diam nec etiam lorem ipsum mauris dapibus arcu, sed bibendum libero elit et sem. Nunc at nunc tortor, ut aliquam augue. Etiam ut sem quis tellus iaculis convallis. Nulla viverra, metus eget accumsan. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo.Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. </p>
<p class="subtitle">Subtitle 2 - should also be as wide as possible, pushing text out of the way in this case, to fill 100% of body width.</p>
<p>Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet.</p>

编辑：开始认为我正在使用错误的元素..也许h2会起作用，因为我打算继续研究。

编辑2：它没有显示h2与使用p有任何明显的区别。

编辑3：添加了一张图片，以澄清我的目标。

最终修改：找到我要找的内容并自己回答问题！将overflow:auto;添加到字幕类使其'背景尊重浮动的边距和填充！看到接受的答案。清除了将来搜索的问题，因为最初我不明白如何正确使用浮动。这是最终产品的链接：

http://www.a3financial.com/subtitletest.php

Answer 1

好的，先做几件事：

float适用于块元素相对于主文档文本的呈现方式。 Float并不是一种控制实际元素本身大小或位置的方法。

看到这个的最好方法就是一个例子：

<div id="A" style="float:right;background-color:#0f0;height:20px;">
    my title
</div>
<div id="B" style="background-color:#00f;height:35px;">
     my impressive language skills
</div>

然后这意味着div A将浮动文档主流中的内容（文本）的左侧（div B在主流中）。这不会影响div A或div B的物理大小。您将看到在此示例中，div B为100％宽（背景标记容器的实际大小）。 Div的默认行为是占据其容器可用宽度的100％。

Div A只有显示内容所需的大小，所以看起来它的行为是不同的。但事实并非如此。因为div A浮动，所以它在主文档外部的虚拟容器中呈现。假容器设置为可能的最小尺寸，基本上是0％宽。因此，像任何0％的continer一样，它可以根据需要拉伸以容纳其中的内容。实际上，在宽度为0％的容器中，div A是100％宽的（默认情况下）。

您还应该注意，在此示例中，div A不仅浮动到div B内的内容的右侧，而是相对于主文档流中的所有内容浮动。这是一个div“clear：both;” css属性派上用场，因为这可以确保浮动的东西停止浮动在文档中的特定点（已经浮动的内容被推下）。

现在，当我们特别关注你的文件时，你有效地试图做的是堆叠3个浮子彼此... B的浮动权利，B浮动C的左边。但是容器本身只会无论多大，他们都需要。这很难管理，并且在不同的浏览器上可能无法预测......并且你最终会尝试管理每个人的宽度，高度，填充和边距以及做各种其他仍然只是为了防止容器重叠和堆积在彼此之上。

使用浮动进行定位时最好的选择是确保在任何一个容器内，浮动的东西不超过一个。所以在你的文档中，有这样的事情：

.subtitle {
    padding-top: 2px;
    background-color: #8FD2E3;
    letter-spacing: -1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #969696;
}
img.alignleftimg {
    float: left;
    width: 163px;
    /*margin-right: 30px;F*/
    padding-right: 30px;
}

请注意，在此CSS中，只有图像设置为浮动。副标题不需要浮动，因为相对于包含它的任何容器，你总是希望它100％宽。

然后是HTML：

<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<div class="section">
<p class="subtitle">Subtitle 1</p>
    <p>
        my impressive language skills 
        my impressive language skills 
        my impressive language skills 
        my impressive language skills
        my impressive language skills
        my impressive language skills 
        my impressive language skills 
        my impressive language skills 
        my impressive language skills 
        my impressive language skills 
        my impressive language skills 
        my impressive language skills 
        my impressive language skills
    </p>
</div>
<div style="clear:both;"></div>
<div class="section">
    <p class="subtitle">Subtitle 2</p>
    <p>Aliquam libero. and some other stuff</p>
</div>

请注意，我们使用div将字幕和字幕应用的文本分组到一个内容容器（部分）中。图像设置为从第一部分开始向左浮动，因此所有文本都将滑出。我们使用一个明确的div来确保我们在此时停止浮动，然后我们启动容器以获取下一个字幕和文本。

与HTML中的任何内容一样，您指定的越少越好。我建议您尽可能少地指定CSS，而不是管理大小，浮点数，位置和所有垃圾。这是一种微妙的艺术，但它还是有回报的。

现在，在我给出的示例中，内容区域的容器和图像实际上重叠。因此，如果您尝试背景样式或边框等，它可能会变得丑陋。因此，这是您可能希望指定宽度和边距来控制容器本身;但是这更容易，你要小心保持向下浮动到任何一个容器中的一个元素。

您可以通过添加此CSS（除了已经存在的内容）来消除上面的容器重叠：

img.alignleftimg + div.section{
    margin-left: 170px;
}

这是一个不寻常的css选择器，称为相邻的兄弟选择器...基本上它说，“适用于所有div元素，类名为”section“，这也是一个带有类的img元素的直接兄弟 - “alignleftimg”的名字....等等！无论如何，我只是将边距设置为比图像宽度稍大的值，并且只在我们想要的特定情况下消除重叠。

您可能希望查看HTML 5 section元素;但我没有在这里使用它，因为它是一个语义元素，因此跨浏览器支持需要的不仅仅是用div标签替换div标签。

另外，我想指出，整个讨论都是W3C的错误。我们需要真正的布局机制，可以在1994年完成HTML布局表的工作...... 18年后，CSS网格仍然没有最终确定，可能还需要10年时间才能在运输浏览器中得到广泛支持。

Answer 2

原来可能！

通过将overflow: auto;添加到字幕类，它会强制它尊重图像的边距和填充！此外，将其添加到无序列表还有一个额外的好处，即确保列表保持水平内嵌直到它完成，然后才能在图像周围进行自动换行。

在这里查看我的最终产品：

http://www.a3financial.com/subtitletest.php

感谢以下主题指向我正确的方向。我已经放弃但偶然发现它正在寻找一个有点不同的问题：

Floated image to left of a ul is ignoring margin/padding

Answer 3

要使HTML元素流畅，您必须将CSS宽度设置为：

width:**percent**%

虽然百分比关键字是0到100之间的数字。

这是一个计算。计算填充和边距以设置正确的宽度百分比。例如：设置3个没有填充或边距的流体div：

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

CSS

.first, .second, .third{
    float:left;
    width:33%;
}

希望这会对你有所帮助。

流体，最大宽度元素（副标题），相应的左浮动（如果存在）。可能？目前它忽略了边距和填充

3 个答案: