如何解决CSS冲突

Question

我不想继续提问。我一直在尝试将代码添加到我的网站。无论我添加什么代码，它都不起作用。我已经改变了CSS名称的名称，这些名称可以起作用但是失败了。

目前我正在尝试添加一些图片库块。我在w3学校学习并且有效。

https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery

我将CSS和代码带到我的网站，它看起来像这样： https://postimg.cc/image/ifn4dsqrr/

我已经尝试了很多卡和区块代码，他们要么弄乱了我的主页，要么破坏了CSS，我必须恢复到以前的版本。

在过去的两天里，我花了6个小时试图获得4个带有图像背景和文字叠加功能的小型响应式块，只需在两个横幅之间工作。

这是我的测试商店的链接，我正在构建一个主页： http://newdev-vitavibe-com.3dcartstores.com/

我决心要学习原因。我打开了一个请求付钱给我建立这个主页的请求。我有很多优惠，但我真的想学习自己。

Answer 1

如果您愿意使用bootstrap，可以将它们放在容器中，我在文档下面链接到此。 Bootstrap在网格方面会让你的生活变得更轻松，很多时候都能保存好我的屁股。

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

检查您网站的HTML，看到您想要的内容可以使用以下html结构完成

<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->

请注意，<br/>之间的div#fullWidthBlock移除了id。 并且不要重复{{1}}属性，它在每个html文档中都是唯一的。

该页面包含更改：

Answer 3

看看＆＃34;！important＆＃34; CSS中的关键字。你应该这样使用它：

#smth { color: red !important; }