php - 不同宽度的首页和文章页

Question

所以我正在制作这个基于 wordpress 的网站，用于添加动态内容，但我已经设置了一个完全 HTML/CSS 和小的 jQuery 内置主题。

我面临的问题是，当我不得不将带有指向整个帖子的链接的预告片之类的首页帖子放置时

像这样的预告片:- http://i.gyazo.com/dda9c60eb3a822b84bdcb3e0067dfc3e.png

因为我对 wordpress 主题一无所知，所以我在 esclate 的 php 文件的帮助下编写了一个可以包含我的 css 类、id 和属性的代码。

因此首先，header.php 中的帖子元素设置如下:-

<div class="post-wrapper">


    <div id="page">
    <div id="page-bgtop">
        <div id="page-bgbtm">
            <div id="content">

对于 single.php 文件也是如此，

我成功地使该网站的首页有预告片，但是当上述 ID 的相同属性被调用到 single.php 文件时，问题就来了，因为类和 ID 是相似的，当用户点击整篇文章，

我为 single.php post 元素创建了另一个类，但它没有任何效果。

这是它的样子:- http://i.gyazo.com/0ec25c1db676463dd6aea209480e9568.png

它显示的是一个预告片而不是完整的帖子，我该如何纠正这个问题？

顺便说一句，它们的 css 代码

#page {
width:100%;
margin: 0 auto;
padding: 0;
display: inline-block;

}

#page-bgtop {
}

#page-bgbtm {
margin: 0px;
padding: 40px 50px 0px 50px;

}



#content {
float: left;
width: 100%;
padding: 0px 0px 0px 0px;
margin-left: -40px;
padding: 20px;
display: inline-block;
margin-bottom: 40px;
font-family: 'Raleway',Arial,sans-serif;
font-size: 14px;
line-height: 23px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

我希望我已经谨慎地解释了我对这个问题的理解。

Answer 1

当您处理 id 时，相同的方法将应用于任何使用 id 的地方，默认情况下它会覆盖类。您可以在 html 中创建新的 id 或添加 class=""，这样您就可以在 css 中标记元素 !important 以覆盖 id 内容。不过这会变得很困惑，因此您最好将上面示例中的 id 更改为类，并使用 id 对不同页面中的类进行小的更改。