如何使两列排成一行

Question

不确定为什么会发生这种情况但是当我缩小页面时，我的右栏（黄色的那一列）向下移动。当我全屏时它看起来很好但不知道如何对CSS做什么以确保列内容总是排到div容器的顶部。这是我对该部分的css

.wrapper-cols {
margin-top:0px;
margin-left: auto;
margin-right:auto;
max-width: 900px;
}

.contact-col1 {
margin-top:0px;
padding-right:5px;
background-color:blue;
 height: 200px;
}

.contact-col2 {
padding-left:5px;
background-color:yellow;
height: 200px;
}

这里是网址：

link

Answer 1

造成这种情况的风格与您与我们分享的代码无关。这些样式表的组合会影响您网站中的所有内容：

• Wordpress包含它自己的CSS。
• 您使用的Beaver Builder Wordpress页面构建器包含它自己的CSS。
• 您使用的Wordpress主题（Avada和Fusion）均包含自己的CSS。
• Bootstrap也混合在一起。

因此，您已经将所有这些CSS巨大的库组合在一起，并且您使用的HTML清楚地使用了他们的类。在这一点上，使网站看起来完全符合你想要的唯一实用方法是自己编写HTML和CSS代码（而不是使用生成器）。

非实用的方式？花几个小时重置所涉及的HTML标记的所有样式，用！important 覆盖它们，使它们表现为默认值。请注意，这涉及使用一些高级CSS概念来反对您所包含的库（可能更容易从头开始编写代码）。