CSS 类未正确应用于网站上的图像

Question

第一次做网站建设者，所以我对 CSS 究竟是如何应用于 html 文档的还是有点犹豫。

我正在尝试将我的页面分成 2 个 div，每个 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 继承它的大小/定位限制吗？为什么不以这种格式继承它上面的div，为什么图片不接受class样式？

我觉得我遗漏了一些非常明显的东西，但我在任何地方都看不到它。任何帮助将不胜感激。

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;
}