Question

我正在使用Wordpress的主题，它有一些内置的响应式列类。我试图让3列布局正常工作。问题出在初始显示上。我希望网站的布局如下：

NAV | BIO AND PIC | SIDEBAR

我得到的是：

BIO AND PIC | SIDEBAR | NAV

HTML代码

您可以在site in question

看到该网站

相关的CSS：

.fusion-column.fusion-two-third {
  width: 65.3333%;
}
dev.icsandbox.com/media="all"
.fusion-column.fusion-one-sixth, .fusion-column.fusion-five-sixth, .fusion-column.fusion-one-fifth, .fusion-column.fusion-two-fifth, .fusion-column.fusion-three-fifth, .fusion-column.fusion-four-fifth, .fusion-column.fusion-one-fourth, .fusion-column.fusion-three-fourth, .fusion-column.fusion-one-third, .fusion-column.fusion-two-third, .fusion-column.fusion-one-half {
  position: relative;
  float: left;
  margin-right: 4%;
  margin-bottom: 20px;
}
body {
  background-color: #f0f0f0;
  color: #404040;
  margin: 0px;
  font-family: 'HelveticaNeue';
  font-weight: light;
  font-size: 15px;
  line-height: 21px;
  letter-space: .4px;
}
body, .post .post-content, .post-content blockquote, #wrapper .fusion-tabs-widget .tab-holder .news-list li .post-holder .meta, .sidebar .jtwt, #wrapper .meta, .review blockquote div, .search input, .project-content .project-info h4, .title-row, .simple-products-slider .price .amount, .quantity .qty, .quantity .minus, .quantity .plus, .timeline-layout h3.timeline-title, .blog-timeline-layout h3.timeline-title, #reviews #comments > h2, .sidebar .widget_nav_menu li, .sidebar .widget_categories li, .sidebar .widget_product_categories li, .sidebar .widget_meta li, .sidebar .widget .recentcomments, .sidebar .widget_recent_entries li, .sidebar .widget_archive li, .sidebar .widget_pages li, .sidebar .widget_links li, .sidebar .widget_layered_nav li, .sidebar .widget_product_categories li {
  color: #404040;
}
body, .sidebar .slide-excerpt h2, .footer-area .slide-excerpt h2, #slidingbar-area .slide-excerpt h2, .post-content blockquote, .review blockquote q {
  line-height: 21px;
}
body, .sidebar .slide-excerpt h2, .footer-area .slide-excerpt h2, #slidingbar-area .slide-excerpt h2, .jtwt .jtwt_tweet, .sidebar .jtwt .jtwt_tweet {
  font-size: 15px;
  line-height: 23px;
}

#wrapper .fusion-column.last {
  margin-right: 0;
}

.fusion-column.fusion-one-third {
  width: 30.6666%;
}
.fusion-column.fusion-one-sixth, .fusion-column.fusion-five-sixth, .fusion-column.fusion-one-fifth, .fusion-column.fusion-two-fifth, .fusion-column.fusion-three-fifth, .fusion-column.fusion-four-fifth, .fusion-column.fusion-one-fourth, .fusion-column.fusion-three-fourth, .fusion-column.fusion-one-third, .fusion-column.fusion-two-third, .fusion-column.fusion-one-half {
  position: relative;
  float: left;
  margin-right: 4%;
  margin-bottom: 20px;
}

#main .sidebar {
  width: 23%;
}
#main .sidebar {
  background-color: #989898;
}
.sidebar {
  width: 23.4042553%;
  float: right;
}

Answer 1

从我看到你的网站看，你必须首先在它们之间切换内容元素：

.fusion-two-third with .fusion-one-third

然后更改

的班级名称

.fusion-two-third .two_third to .fusion-one-third .one_third

占1/3，占全部宽度的三分之二。然后，如果你检查你的DOM，你会看到你有一个：

<div class="fusion-clearfix'></div>

删除它，因为这会将您的侧边栏推到内容下方，并且您将拥有所需的布局。

获得3列响应

1 个答案: