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类没有正确应用到网站上的图像

回答

相关问题