html - CSS中的文字流

图片nad文字流动出现问题。
我有来自右侧文本的图像，但是如果文本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;
}

最佳答案

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

#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 */
}

关于html - CSS中的文字流，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22723900/