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

请参阅下面页面蓝色区域中的注释，以了解我正在努力实现的目标

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

据我所知，这是当您没有为p设置任何宽度并且为浮点设置了一个宽度时的预期行为：left。。但出于某种原因，我的字幕背景在图像后面，不尊重图像的“边缘”。也许我的期望是错的。我知道带浮子的液体宽度很难/不可能达到。有没有办法做到这一点

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

据我所知，这就是应用于浮动的全部内容：对：

#content .subtitle {
    padding-top: 2px;
    float: right;
    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;
}

HTML（对长拉丁语表示歉意，需要文本来说明流程）：

副标题1-应尽可能宽，以考虑图像的填充/边距
nunc nisl velit，fringilla ut ornare non，iaculis在同侧。前庭静息时间。智者的生命是一种尊严。勒勒姆·伊普苏姆·多洛在泰勒斯。非前牙舌的生命。根据自由精英和sem的研究，我们发现了一种新的直径元素。努克在努克托托，犹他州阿利夸姆奥古斯。这是一个很好的例子。纳拉·维韦拉，梅特斯·埃吉特·阿库姆桑。梅塞纳斯·佩德·尼塞尔、欧盟元素、奥纳雷·ac、马莱苏阿达、埃拉特。孕期胎膜早破。多奈克调味品、非调味品、利古拉·埃尼姆·奥纳·尼布、拉奥里特·厄洛斯·奎斯·埃格特·安特。奎斯克·埃拉特。佩伦茨克的前庭，在温和的奥古斯都，在温和的自由中。Fusce mattis viverra elit。福斯·奎斯·托托。阿利夸姆·自由。Vivamus nisl nibh、iaculis vitae、viverra sit amet、ullamcorper vitae、turpis。阿利奎姆·埃拉特·帕特。前庭对侧扫描电镜，枕侧扫描电镜，nec，iaculis nec，狮子座。佩伦特斯式三联症。奎斯格言。整粒白藜芦、红矢状花序、芸香苷、红藜芦素、白藜芦。听写门上的悬念。不要把它放在最上层

副标题2-也应尽可能宽，在这种情况下，将文本推到一边，以填充正文宽度的100%
阿利夸姆·自由。Vivamus nisl nibh、iaculis vitae、viverra sit amet、ullamcorper vitae、turpis。阿利奎姆·埃拉特·帕特。前庭对侧扫描电镜，枕侧扫描电镜，nec，iaculis nec，狮子座。Fusce odio。埃蒂亚姆酒后驾车、福西布斯酒后驾车、普莱塞拉特酒后驾车、索达尔酒后驾车、奥奇酒后驾车。Donec ornare neque ac sem。莫里斯·阿利奎特

编辑：开始认为我使用了错误的元素。。也许h2能起到我想要的作用。。继续研究

编辑2:似乎h2与使用p没有任何明显区别

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

最终编辑：找到了我要找的内容并自己回答了问题！添加

溢出：自动

到subtitle类使其“背景尊重浮点的边距和填充！”！见公认的答案。为以后的搜索清理了这个问题，因为最初我不知道如何正确使用浮动。以下是最终产品的链接：

---

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

width:**percent**%

而percent关键字是介于0和100之间的数字

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

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

---

希望这对您有所帮助。

好的，首先有几件事：

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>

注意，在这个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> 

这是一个不寻常的css选择器，称为相邻同级选择器。。。基本上，它说，“应用于所有类名为“section”的div元素，这也是类名为“alignleftimg”的img元素的直接同级元素……等等！总之，我只是将边距设置为略大于图像宽度的值，并且仅在我们想要的非常特定的情况下才消除重叠

您可能想查看HTML5节元素；但我在这里没有使用它，因为它是一个语义元素，因此跨浏览器支持需要的不仅仅是用节标记替换div标记

另外，我想指出的是，整个讨论都是W3C的错。我们需要真正的布局机制，早在1994年就完成了HTML布局表的工作……18年后，CSS网格还没有最终确定，而且可能还要10年才能在发布浏览器中得到广泛支持。

结果是是pos不可能

通过向subtitle类添加

overflow:auto；

，它强制它尊重图像的边距和填充！此外，将其添加到无序列表中还有一个额外的好处，即确保列表水平排列，直到在图像周围换行之前完成

在此处查看我的最终产品：

感谢以下线程为我指明了正确的方向。我已经放弃了，但碰巧发现它在寻找一个不同的问题：

是不是.sub

<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>

.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;
}

<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> 

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