不同宽度的首页和文章页面答案

【问题标题】：Different width's on front and article page不同宽度的首页和文章页面
【发布时间】：2014-09-02 10:33:48
【问题描述】：

所以我正在制作这个基于 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 后元素创建了另一个类，但没有任何效果。

这是它的样子：- 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;
}

我希望我已经谨慎地解释了我掌握的关于这个问题的一切。

【问题讨论】：

标签： php html css wordpress width

【解决方案1】：

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

【讨论】：