html - CSS 中的文本流动

Question

图像和文本流动有问题。我有图像，来自右侧的文本，但是如果文本 div 的高度变得比图像 div 的高度高，那么从图片下方的新行开始写入，我不需要那个。如何创建类似 的内容

我的代码:

HTML:

<div id="wrapper">
        <div id="content">
            <div id="image" class="fleft"><img src="img/image.png" alt="dart-face"/></div>
            <div id="text">
                <h1>Darth Vader</h1>
                <p>Darth Vader (born Anakin Skywalker) is a central character in the Star Wars saga,[1][2][3] appearing as one of the main antagonists of the original trilogy and as the main protagonist of the prequel trilogy.

                    <p>The character was created by George Lucas and numerous actors have portrayed him. His appearances span all six Star Wars films, and he is an important character in the expanded universe of television series, video games, novels, literature and comic books.</p>
                </p>
            </div>
        </div>
    </div>

CSS:

*{
    margin: 0;
    padding: 0;
}

body
{
    font: 12px Arial, Helvetica, sans-serif;
    background: url('../img/pattern.png');
}

#wrapper
{
    max-width: 80%;
    margin: 50px auto;


    -webkit-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    -o-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    -ms-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
    box-shadow: 0 5px 13px rgba(0,0,0,0.75);


    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;

    background: -webkit-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: -moz-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: -o-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: -ms-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
    background: linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
}

#content
{
    display: inline-block;
    /*position: relative;*/
}

#image
{
    margin: 34px;
}

#text
{
    /*position: absolute;*/
    line-height: 20px;
    text-align: left;
    margin: 34px 25px 25px 25px;
}

#text h1, #text p
{
    margin-bottom: 20px;
}

.fleft
{
    float: left;
}

.fright
{
    float: right;
}

Answer 1

将 overflow:hidden 设置为 #test 以触发其布局，以便它看到并远离其周围的 float 元素并保持其内部。

#text {
    overflow:hidden;/* triggers layout , so it cares about inside and outside floatting elements */
    line-height: 20px;
    text-align: left;
    margin: 34px 25px 25px 25px;/* you might need to reset these since it will bang against floatting image */
}