0

我有以下 HTML 代码，我想将其样式包含在不同文件的 CSS 中

<div id="leftPanel" style="background-color:grey;
                margin-left:7px;
                margin-top:7px;
                float:left;">
                <img src="images/fa.png">
            </div>

<div id="right" style="font-size:72%;float:left; margin-left:15px;margin-top:15px">
                Lorem Ipsum Text oder Claim<br>gerne auch mehrzeilig
            </div>

看起来像这样：

在此处输入图像描述

现在，如果我尝试在单独的 CSS 中插入样式，如下所示：

    #leftPanel {
   background-color:grey;
   margin-left:7px; 
   margin-top:7px;
   float:left;
}

在 HTML 中：

<link rel="stylesheet" href="css/style.css"/>
<div id="leftPanel">
                <img src="images/fa.png">
            </div>

然后改变位置，得到这样的结果：

在此处输入图像描述

4

4 回答 4

1

leftPanel 在您的最终 html 中是一个 id，而不是一个类。#leftPanel在 css 中它不应该是.leftPanel.

于 2013-09-05T23:38:40.210 回答
0

这对我来说看起来不错。听起来像是您的 CSS 文件未正确加载的问题。检查以确保 CSS 文件保存在正确的位置并包含正确的 ID 样式。

http://jsfiddle.net/zfdUw/1/ （这在 Safari 中对你有用吗？）
HTML：

<link rel="stylesheet" href="css/style.css"/>  <!--Check to make sure the file is here-->
<div id="leftPanel">
            <img src="images/fa.png">
        </div>

<div id="right" style="font-size:72%;float:left; margin-left:15px;margin-top:15px">
                Lorem Ipsum Text oder Claim<br>gerne auch mehrzeilig
            </div>

CSS：

#leftPanel {
    background-color:gray;
    margin-left:7px; 
    margin-top:7px;
    float:left;
}
于 2013-09-05T23:47:19.027 回答
0

您的第一段 HTML 与class="leftPanel"您的第二段代码相同id="leftPanel"。

如果您已将其从类更改为 id，则需要在 CSS 中将其引用为#leftPanel.

于 2013-09-05T23:40:24.283 回答
0

您的 CSS 基于类匹配，.leftPanel但您的 div 有id="leftPanel"而不是class="leftPanel". 这是一个错字吗？

于 2013-09-05T23:41:13.297 回答