Question

图像nad文本流动有问题。我有图像，从右侧文本，但如果文本div的高度变得更高，那么图像div高度是从图片下方的新线写的，我不需要它。如何创建类似 enter image description here

的内容

我的代码：

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以触发其布局，使其看到并远离周围的浮动元素并保持其内部。

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

Answer 2

还可以试试这个...以下代码可以轻松解决问题。这是更新的HTML ...仅发布更新的部分

<div id="content">
    <div id="image"><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 style="clearfix">&nbsp;</div>
 </div>

现在我们必须从CSS中删除不需要的代码

请从您的CSS中删除以下代码（相同的代码发布到相关的代码中）

#image
{
    margin: 34px;
}

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

.fleft
{
    float: left;
}

.fright
{
    float: right;
}

现在只需添加以下CSS

#image
{
    float: left;
    width:30%;   /*Choose width accordingly*/

}

#text
{
    float: left;
    width:60%;     /*Choose width accordingly*/
}
.clearfix 
{
    display:block;
    clear:both;
    content:''; 
}

试试这个希望这个帮助....如果有任何疑问？不要犹豫评论谢谢

在CSS中流动的文本

2 个答案: