Html 带背景的标题浮动图像

对!！另一个浮动图像问题！当然，关于这一点有很多问题，我读到的内容有：将图像添加到背景图像属性。这次不行：

问题

我有一个图像，漂浮在左边。我旁边有个标题。但是向浮动图像添加右边距时。文本确实会远离图像，但背景仍在继续。我希望背景也分开。在

所以我尝试了一些方法，比如，浮动整个文本，但当然，文本是动态的，我无法确定真实的高度

我试着在一个松散的div中添加文本，并将其与位置放在一起。不起作用，因为新的div也是100%宽度（根据H1的定义）

那么我到底想要什么呢？一张图片，在左边。文本旁边有一个标题。标题在图像（+右边距）和它所在div的末尾之间拉伸

对于那些懒得点击我的网页的人：

香蕉树的名称
这里放了很多文本，因为有很多文本很好。当然还有更多。
.香蕉
{
宽度：200px；
右边距：2米；
浮动：左；
}
.文本框
{
宽度：400px；
背景色：红色；
}
梅因先生
{
背景颜色：绿色；
}
h1
{
字体大小：粗体；
背景颜色：蓝色；
}

另外，我不喜欢JS的高度调整。我确实喜欢css和html的黑客攻击。

试试这个：

.banana {
    width:200px;
    padding-right:2em;
    float:left;
}

.textBox {
    float:left;
    width:200px;
    background-color:red;
}

.main {
    background-color:green;   
}

必须指定两个

div

元素的宽度。如果没有，则未浮动的第二个

div

将从包含

div

的列表的左上角开始

注意：如果2个

div

元素的宽度大于容器

div

，则最终会出现一个大于另一个的情况。

尝试以下操作：

.banana {
    width:200px;
    padding-right:2em;
    float:left;
}

.textBox {
    float:left;
    width:200px;
    background-color:red;
}

.main {
    background-color:green;   
}

必须指定两个

div

元素的宽度。如果没有，则未浮动的第二个

div

将从包含

div

的列表的左上角开始

---

注意：如果2个

div

元素的宽度大于容器

div

，如果我把所有的东西都放在一个html文档中而不是使用JSFIDLE来运行它，我实际上得到了你想要的东西如果我把所有的东西都放在一个html文档中并运行它而不是使用JSFIDLE，我实际上得到了你想要的东西。。。这是HTML5。你能告诉我这在IE7-8上是否有效吗？我在Mac电脑上，所以我没有IE

如果不起作用，请尝试在文档标题中添加以下标记：

---

HTML

---

我被迷住了。。。这是HTML5。你能告诉我这在IE7-8上是否有效吗？我在Mac电脑上，所以我没有IE

如果不起作用，请尝试在文档标题中添加以下标记：

---

HTML

---

---

@Toboboga它在FF中不起作用。标题背景继续位于图像下方。@Toboboga在FF中不起作用。标题背景继续位于图像下方。抱歉，它在FF中甚至不起作用。文本和标题在图像下面。@Marnix：就像我说的，这是HTML5。。并且FF不支持HTLM5。在最新版本的Chrome、Safari或Opera中试用。将和标记替换为。**FF不支持Chrome、Safari和Opera那样多的HTML5。我还尝试使用div和all将这段代码转换为HTML4，但也没有成功。但我看到你尝试的一些事情是好的。Like

float：左溢出：自动抱歉，但它在FF中甚至不起作用。文本和标题在图像下面。@Marnix：就像我说的，这是HTML5。。并且FF不支持HTLM5。在最新版本的Chrome、Safari或Opera中试用。将和标记替换为。**FF不支持Chrome、Safari和Opera那样多的HTML5。我还尝试使用div和all将这段代码转换为HTML4，但也没有成功。但我看到你尝试的一些事情是好的。Like
float：左溢出：自动似乎在做我想做的事情。只是现在，主div是空的。一切都漂浮在外面。所以我的main的高度是0，应该是自动高度。我用一些额外的属性修改了你的样式表<代码>溢出：自动似乎对利润非常重要。并添加了一些
清除：两个
状态。
div
s仍然是height:0，但我想这是我无法避免的。谢谢似乎在做我想做的事。只是现在，主div是空的。一切都漂浮在外面。所以我的main的高度是0，应该是自动高度。我用一些额外的属性修改了你的样式表<代码>溢出：自动似乎对利润非常重要。并添加了一些
清除：两个
状态。
div
s仍然是height:0，但我想这是我无法避免的。谢谢
<section id="main">
    <article id="banana">
        <section>
            <img src="http://www.freakingnews.com/images/app_images/banana.jpg"/>
        </section>
        <section>
            <header>
                <h1>Test</h1>
            </header>
            <p>
                Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! 
            </p>
        </section>
    </article>

</section>

#main {
    position: relative;
    width: 800px;
    min-height: 500px;
    background: black;
    padding: 0;
    left: 50%;
    margin-left: -400px;
}

#main h1 {
    font-size: 200%;
    text-align: left;
}

#banana {
    position: relative;
    width: 100%;
    height: auto;
    margin: 5px;
}

#banana img {
    position: relative;
    width: 400px;
}

#banana section {
    float: left;
    padding: 15px;
    overflow: auto;
}

#banana h1 {
    color: white;
}

#banana p {
    color: gray;
}