Question

我们的模板由设计机构设计，他们向我们提供了HTML / CSS模板。他们在他们的css文件中有这个：

div{
    float: left;
}

现在我们正在网站上实现一个新的聊天软件，上面的这一行正在应用于聊天软件，它正在破坏它的所有css。当我清除上面这一行时，整个模板都毁了，当我们拥有它时，聊天软件css就毁了...... 我尝试将聊天软件放在</body>之后，并将上述css更改为：

body div{
    float: left;
}

但是由于聊天软件正在加载一些js文件，它会将其带到页面的body，因此它的css仍然无法正常工作。

我如何解决这个问题？

提前致谢。

Answer 1

您可以使用特殊ID在div中添加聊天，并将float:none;设置为内部div，以下是代码：

HTML：

<div id="ChatContainer">
    /* chat goes here */
</div>

CSS：

#ChatContainer div{
    float: none;
}

Answer 2

在特定的聊天记录div（元素）上写下这个。

<div style="float:right" > </div> /*this will move it to right*/

或通过CSS

<div class="chat_holder">
</div>

.class{
    float:right /*or left*/
}

如果您想将其永久保留在Google右边的屏幕底部作为Google邮件或其他邮件。

 <div style="position:fixed;bottom:0;right:0;" > </div>

或通过CSS

<div class="chat_holder">
</div>
.class{
    position:fixed;
    bottom:0;
    right:0;
}

还有很多其他方法。但没有更多信息，我只能帮助你。

Answer 3

您可以替换以下内容：

div{
    float: left;
}

以下内容：

div:not(#chat){
    float: left;
}

或

div:not([id='chat']){ float: left; }

此处，聊天框的<div>需要将id属性指定为id='chat'。因此，您的html需要包含以下内容作为聊天框的代码：

<div id='chat'> code for chatbox. </div>

该解决方案基于在除具有特定id之外的所有元素上应用CSS样式的方法。试试吧。希望这会有所帮助。

Answer 4

您可以为聊天软件创建不同的CSS文件，并覆盖相同的样式属性。

或者您也可以尝试为您的聊天软件的正文标记提供课程，并使用下面给出的相同CSS，

body.chatbody div { 向左飘浮; }

不要将css应用于div

4 个答案:

您可以替换以下内容：

以下内容：