Question

首次使用网站构建器，因此我对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中，具有圆形边框等。

但是，当我尝试将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，为什么不接受类风格的图像呢？

我觉得我错过了一些完全明显的东西，但我无法在任何地方看到它。任何帮助将不胜感激。

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

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

2 个答案: