Question

是的！另一个浮动图像问题！当然有很多关于这个的问题，我读过这样的事情：将图像添加到background-image属性。这次不能这样做：

jsFiddle here

问题

我有一张图像，漂浮在左边。我已经走到了旁边。但！向浮动图像添加边距权限时。文本确实会远离图像，但背景仍然存在。我也想要背景分离。在jsFiddle

中

所以我尝试了一些像浮动整个文本的东西，但当然，文本是动态的，我无法确定真正的高度。

我尝试在松散的div中添加文本并将其放在旁边。不起作用，因为新的div也是100％宽度（根据H1的定义）。

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

对于懒得点击我的jsFiddle：

的人

<div class="main">
    <div><img src="http://www.freakingnews.com/images/app_images/banana.jpg" class="banana"></div>
    <div class="textBox">
        <h1>The title of the banana BLA</h1>
        A lot of text is placed in here, because it is nice to have a lot of text. And more of course.
    </div>
</div>

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

.textBox
{
    width:400px;
    background-color:red;
}

.main
{
    background-color:green;
}

h1
{
    font-weight:bold;
    background-color:blue;
}

PS。我不喜欢JS的高度黑客攻击。我做就像使用css和html的黑客一样。

Answer 1

试试这个：

.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，则最终会有一个在另一个之上。

Answer 2

如果我把所有东西放在一个html文档中并运行它而不是使用jsFiddle

，我实际上得到了你想要的东西

Answer 3

This works!我被带走了......这是HTML5。你能告诉我这是否适用于IE7-8？我在Mac上，所以我没有IE。

如果不起作用，请尝试在文档标题中添加以下标记：<meta http-equiv="X-UA-Compatible" content="chrome=1">。

HTML

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

CSS

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

与标题的浮动图象有背景

3 个答案:

HTML

CSS