Question

我在这里做了一个简单的例子 - ＆gt; http://jsfiddle.net/Tryah85/DV4N8/

#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
}

.contactLeft {
position:relative;
margin:auto;
background-color:lime;
float: left;
margin: 0 0 0 0;
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
}

.contactRight {
position:relative;
margin:auto;
background-color:yellow;
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006; 
padding-right: 33px;
padding-top: 10px;
height: 90px;
}

我今年使用标准主题 - 二十四。当屏幕最小化时，我想要两个盒子响应地工作，盒子B在我制作的样机小提琴下面就像A一样。我已经尝试在ID中嵌套2个类。从这个例子中你会注意到我使用了三个ID。

我将CSS嵌入到Wordpress页面中，它只识别第一个Div。

基本上我正在制作一个联系页面，左边的div有一个地址，并有权获得联系信息。当有智能手机/ iPhone的人查看页面时，这些盒子是堆叠的 - 我的示例有效，但不是在Wordpress中。谁知道为什么？

Answer 1

我终于弄明白了。 CSS可以嵌入页面中（将静态字符串加载到仪表板中时）。它仅在类和ID之间没有空格时有效。这在我曾经使用过的其他CSS文件中并不重要，但这花了我一段时间才弄明白。

像这样输入：

<style type="text/css">
#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
}                      <---------NO SPACE
.contactLeft {
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
}                         <---------NO SPACE
.contactRight {
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006; 
padding-right: 33px;
padding-top: 10px;
height: 90px;
}
</style>

使用WordPress静态嵌套在页面中

1 个答案: