1

我修改了一个 WordPress 模板，在内容区添加了另一列。

正如您在此处看到的：http ://scorejava.com/wordpress351/文章的内容区域包含两列（第一列显示最后插入的帖子，第二列显示阅读次数最多的帖子）

为此，我只是在index.php wordpress 模板文件中创建了两个 div，分别具有id="column1"和id="column2"

然后在我的模板的style.css文件中，我为这些 divs 元素声明了以下属性：

#column1{
    float: left;
    width: 50%;
    overflow:hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}

#column2{
    width: 50%;
    padding-left: 30px;
    overflow:hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}

在左侧浮动 column1 div 并在其右侧有 column2。

在 Firefox 中似乎运行良好（我在我的 Ubuntu 上的 Firefx 19.0.2 上对其进行了测试）但是如果我使用Chrome打开它，这是不正确的，并且 column2 div 出现在 column1 div 下，相对于后者稍微向右移动.. .

为什么？我试图找到一个解决方案，但我没有更多的想法（我对 CSS 不太擅长）

你能帮我在 Chrome 浏览器上解决这个问题吗？

肿瘤坏死因子

安德烈亚

4

3 回答 3

3

跨浏览器简单解决方案：

#column1 {
    width: 48%;
}
#column2 {
    width: 48%;
    padding-left: 4%;
}
于 2013-03-26T11:59:49.060 回答
1

您已将每列的宽度设置为50%，因此右列的正确宽度为50%plus padding-left: 30px。你需要做的是设置box-sizing: border-box，它应该没问题。在这里阅读更多。

请记住，它不会在 lt IE8 中工作。

于 2013-03-26T11:54:13.770 回答
0

如果您希望列之间有 30px 的边距，我会执行以下操作：

#column1, #column2{
    float:left;
    width: 50%;
    padding-left: 30px;
    overflow:hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#column1{
    padding-right:15px;
}

#column2{
    padding-left:15px;
}

该box-sizing属性确保您可以在不更改其宽度的情况下向元素添加填充。通常一个元素的宽度是这样计算的：total width= width+ padding，box-sizing:border-box这变成了total width=width

于 2013-03-26T18:21:22.400 回答