CSSクラスがサイトのイメージに正しく適用されない

Question

初めてのWebサイトビルダーなので、CSSがhtmlドキュメントにどのくらい正確に適用されているか、まだまだ不安です。

私は自分のページを2つのdivに分割しようとしていますが、それぞれが50％を占めています。左にはイメージが含まれ、右にはテキストが含まれています。これは、横並びの構成を形成します。

私のような私のコードを入力します。予想通り

<div class="infobox"> 
    <div style="float:left;width:50%;"> 
     <img src="foo.jpg" style="max-width:95%;height:auto;margin-top:10%;border-radius:10%;overflow:hidden;" alt=""> 
    </div> 
    <div style="margin-left:51%;"> 
     <h1>MAIN PAGE</h1> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
    </div> 
</div> 

すべての作品。画像はdivにあり、丸みを帯びています。

しかし、私のmaster.cssファイルにCSSコードを移動しようとすると、すべてが壊れます。次のように私のコードは次のとおりです。

<div class="infobox"> 
      <div style="float:left;width:50%;"> 
       <img class="image-style" src="foo.jpg" alt=""> 
      </div> 
      <div style="margin-left:51%;"> 
       <h1>MAIN PAGE</h1> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
      </div> 
     </div> 

そして、私のmaster.cssファイルに：

.image-style { 
    max-width: 95%; 
    height: auto; 
    margin-top: 10%; 
    margin-left: 10%; 
    border-radius: 10%; 
    overflow: hidden; 
} 

この第二の方法が使用され、サイド・バイ・サイドの構成休憩。イメージは画面の100％を占めるようになり、テキストはその上に正しい位置に表示されます。さらに、自分のスタイルの変更はイメージに適用されません。わかりません;画像はその内部にあるdivのサイズ/配置の制限を継承しませんか？この形式でdivの上にあるdivを継承しないのはなぜですか？また、画像がクラススタイルを受け入れないのはなぜですか？

私は完全に明白な何かを見逃しているように感じますが、私はどこでもそれを見ることができません。どんな支援も大歓迎です。

Answer 1

外部のCSSファイルを正しくリンクしている場合は、ブラウザのキャッシュをクリアして試してみてください。

Answer 2

float：left;あなたがあなたの外部のCSSと正しくリンクされているなら、イメージクラスに。

.image-style { 
    max-width: 95%; 
    height: auto; 
    float:left; 
    margin-top: 10%; 
    margin-left: 10%; 
    border-radius: 10%; 
    overflow: hidden; 
}