浮动属性不起作用

Question

浮动有问题。除第一行外，文字不会从右侧流出图片。当我创建一个新的 html 文档并插入一张带有描述的图片时，一切正常。不知道问题出在哪里

这是html：

<div id="container">

    <div id="logo">
        <h1>Best movies of all time!</h1>
    </div>

    <div id="nav">
        Shawshank Redemption <br />
        Forrest Gump <br />
        Seven <br />
        The Lord of the Rings <br />
        American Gangster  <br />
    </div>

    <div id="content">

        <h2>Shawshank Redemption</h2>

        <p id="shawshank_description">
        <img id="shwashank" src="img/shawshank.jpg" width="200" height="150" />
        The Shawshank Redemption is a 1994 American drama film written and directed by Frank Darabont, and starring Tim Robbins and Morgan Freeman. Adapted from the Stephen King novella   Rita Hayworth and Shawshank Redemption, the film tells the story of Andy Dufresne, a banker who is sentenced to life in Shawshank State Penitentiary for the murder of his wife and her lover, despite his claims of innocence.  During his time at the prison, he befriends a fellow inmate, Ellis Boyd "Red" Redding, and finds himself protected by the guards after the warden begins using  him in his money-laundering operation. Although it was a box office disappointment, the film received multiple award nominations (including seven Oscar nominations) and outstanding reviews from critics for its acting, story, and realism. It has since been successful on cable television, VHS, DVD, and Blu-ray. It was included in the American Film Institute's 100 Years...100 Movies 10th Anniversary Edition.[4] It is considered to be one of the greatest films of all time. The Shawshank Redemption is a 1994 American drama film written and directed by Frank Darabont, and starring Tim Robbins and Morgan Freeman. Adapted from the Stephen King novella    Rita Hayworth and Shawshank Redemption, the film tells the story of Andy Dufresne, a banker who is sentenced to life in Shawshank State Penitentiary for the murder of his wife and her lover, despite his claims of innocence.  
        </p>

    </div>

    <div id="ad">
        <img src="img/banner.gif" />
    </div>

    <div id="footer">
        Best movies of all time! &copy; All rights reserved
    </div>

</div>

这是css：

#shawshank {
  float: left;
}

Answer 1

在您的 CSS 文件中，您需要 #shawshank {...} 而不仅仅是 shawshank{...}，因为您是通过其 id 定位元素。我还注意到在你的代码中你的图像上的 id 属性是 "shwashank" 而不是 "shawshank"，所以这也可能是一个问题。

此外，您的浮动可能不适用于您当前在段落标记内嵌套的图像，因为它们应该并排浮动。尝试：

<img id="shawshank" src="img/shawshank.jpg" width="200" height="150" />
<p id="shawshank_description">...</p>

并在您的 CSS 文件中添加：

#shawshank_description {
    float: right;
}

Answer 2

这里的问题是您的 float: left 样式没有被应用...试试这个：

HTML:

<p id="shawshank_description">
  <div class="shank_image">
    <img src="img/shawshank.jpg" width="200" height="150" />
  </div>
  It is considered to be one of the greatest films of all time... 
</p>

CSS:

.shank_image img{
  float: left;
}

https://jsfiddle.net/qbbbm514/

浮动属性不起作用

float property does not work

css-float

浮动 属性 不起作用

float property does not work

css-float

浮动属性不起作用