CSS類沒有正確應用到網站上的圖像

第一次網站建設者，所以我仍然有點搖擺不定CSS如何適用於HTML文檔。CSS類沒有正確應用到網站上的圖像

我試圖將我的頁面分成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，具有圓形的邊框等。

但是，當我嘗試將CSS代碼移到我的master.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，爲什麼圖像不接受類風格？

我覺得我錯過了一些完全明顯的東西，但我無法在任何地方看到它。任何援助將不勝感激。

來源

2017-06-21 ratcheting_weasel

如果您已正確連接外部css文件，只需清除瀏覽器緩存並嘗試。

來源

2017-06-21 02:48:08 ThilinaMD

謝謝，明白了。猜猜我的緩存數據破壞了一切。我知道這很容易。 –

https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – ThilinaMD

請加float：left;到圖像類，如果你正確鏈接你的外部CSS

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

來源

2017-06-21 02:55:06

CSS類沒有正確應用到網站上的圖像

回答

相關問題