floatプロパティが機能しません

Question

フロートに問題があります。テキストは最初の行を除いて右側から流れません。新しい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です：ここで

がHTMLだCSSファイルで

#shawshank { 
    float: left; 
} 

Answer 1

問題ここでは、あなたの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/

Answer 2

あなたはそのidで要素をターゲットにしているので、あなたは、#shawshank {...}だけではなくshawshank{...}を必要としています。また、あなたのコードでは、あなたのイメージ上のidプロパティが "shawshank"ではなく "shwashank"であることに気付きました。

また、浮動小数点数は、互いに並んで浮動するため、段落タグ内のイメージの現在の入れ子では機能しない可能性があります。試してみてください：

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

そして追加CSSファイル内：

#shawshank_description { 
    float: right; 
}