故障排除：两个 CSS 元素并排，中间有填充

Question

我试图让一组页面上的主要文本以两列格式显示，中间有 30 像素的填充。无论用户如何调整窗口大小，我还希望保持每列中的段落以我选择的方式对齐。有人告诉我不要将表格用于任何不是电子表格数据的东西，所以我尝试使用我在这里找到的方法——Make two CSS elements fill their container, side-by-side, with margin。不幸的是，无论出于何种原因，它对我不起作用：“主” div（我试图将其限制为 75% 的宽度，以便“侧” div 可以坐在它旁边）在所有浏览器中都以全宽出现，当我尝试在 Firefox 中“检查元素”时，它甚至根本不显示宽度属性！

这是我一直在尝试使用的改编：

HTML：

<div class="text">
            <div class="main">
                <p> Main body text blahblahblah. </p>
            </div>
            <div class="side">
                <p> Testing side text container setup. </p>
            </div>
</div>

CSS：

.text {
    margin: 20px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

.main {
    display: inline-block; 
    clear: both;
    width: 75%
    margin: 0;
    padding-right: 30px;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.main > p {
    display: block;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    border: none;
}

.side {
    display: inline-block;
    width: 25%;
    font-weight: bold;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.side > p {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

知道出了什么问题吗？

Answer 1

我使用了与您相同的代码，并引入了一个微小的变化，即inline-block hack。首先你看这个解释，然后是更新的演示。

初始代码：

<div class="text">
    <div class="main">
        <p>Main body text blahblahblah.</p>
    </div>
    <div class="side">
        <p>Testing side text container setup.</p>
    </div>
</div>

有什么问题？

div.main 和 div.side 之间有空格。

如何解决？

有很多技巧。我已经使用了 html 评论黑客。您可以在 Chris 的这篇文章中了解其他方法：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

新代码：

<div class="text">
    <div class="main">
        <p>Main body text blahblahblah.</p>
    </div><!--
    notice this
    --><div class="side">
        <p>Testing side text container setup.</p>
    </div>
</div>

现在你看到了demo。

Answer 2

我查看了您的代码，发现您的 CSS 中有一个无效行。您用来设置边距的行缺少一个分号，它会抛出一些东西，其中之一就是边距。

希望对您有所帮助。