内容被推倒

Question

我想让我的页面看起来如下：

​

​

然而，目前看来：

我的网站

我试图更改padding-right / left，但菜单中没有任何变化。

<article style="padding-right: 10px; padding-left: 10px;" class="post-6 page type-page status-publish entry" itemscope="" itemtype="http://schema.org/CreativeWork"><header class="entry-header">

有什么建议我做错了吗？

谢谢你的回复！

Answer 1

好吧，给你：

第一步：

将entry-content div移动到facet_selection旁边的facet-container，然后从以下位置更改css：

.entry-content {
    float: left;
    width: 790px;
}

to:

 .entry-content {
    float: left;
    width: 100%;
}

因为您的父div是entry-content，而该产品div也是entry-content。你应该给前任改个类名。entry-content2现在为它设置了一些样式：

.entry-content2 {
    float: right;
    width: 795px;
}

然后，css 将从：更改为

#facet_selection {
    width: 22%;
    padding: 1%;
    margin-right: 2%;
}

to:

#facet_selection {
    width: 260px;
    padding: 1%;
    margin-right: 2%;
}

好了，现在轮到您了，您可以随意更改width、padding或margin。我看到你使用了很多额外的padding或margin__，你可以删除一些。我做了检查元素和它的工作，不能把你所有的网站到JSFiddle，所以按照我的指示。

结果：

​

​

Answer 2

适用下列规则：

.entry-content {
  width: 100%;
}

aside {
  float: right;
  width: 75%;
}