css - 如何在三“列”设置中将中间小部件区域居中

Question

在修改我的 wordpress 主题时，我从内容/侧边栏布局变为全宽布局。在内容部分有两个“小部件区域”home-middle-left（向左浮动）和 home-middle-right（向右浮动）。当我全宽时，我添加了第三个小部件区域，称为 home-far right。

我不知道如何使中间小部件区域居中并与其他两个区域等距。就目前而言，它粘在右边的那个上。

http://signaturehouston.com

谢谢

PS对不起，如果我的描述在技术上不正确-我是新手。

Answer 1

为您的 Div 留出余地

尝试添加这个：

.home-middle-right {
  float: right;
  margin-left: 35px;  /*ADD THIS*/
}

您可以根据您的布局需要更改边距

希望这可以帮助！

Answer 2

您需要为中间小部件提供自己的类，因为中间和右侧小部件 div 使用相同的类。假设你称之为：

<div class="home-middle widget-area">

的CSS：

.home-middle {
    float: none;
    margin: 0 auto;
    width: 332px;
}

问题是您使用与左侧小部件相同的类，因此它向右浮动。并且margin: 0 auto;将始终以动态方式居中。