Html 疑难解答：两个CSS元素并排，中间有填充

我试图让一组页面上的主文本以两列格式显示，中间有30像素的填充。我还希望保持每列中的段落按照我选择的方式对齐，无论用户如何调整窗口大小。我被告知不要将表格用于任何非电子表格数据的东西，所以我尝试使用我在这里找到的方法--。不幸的是，不管出于什么原因，它对我都不起作用：“main”div（我正试图将其宽度限制在75%，以便“side”div可以放在它旁边）在所有浏览器中都以全宽显示，而当我尝试在Firefox中“inspect element”时，它甚至根本没有显示width属性

以下是我一直尝试使用的改编：

HTML:

---

知道出了什么问题吗？

我查看了您的代码，发现CSS中有一行无效。你用来设置边距的那一行缺少了一个分号，这个分号会把一些东西去掉，其中一个就是边距

---

希望能有所帮助。

我使用了与您相同的代码，并引入了一个小小的更改，即

内联块

黑客。首先看一下这个解释，然后是更新的演示

初始代码：

<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>

---

现在您看到了。

类似的内容了吗？啊，谢谢你！不过，我还有两个后续问题：1。为什么75-25的设置不起作用？正如另一位用户所提到的，我必须降低百分比，以说明边界/等（70-25工作得很好），但我认为“框大小”的全部目的是让我绕过这一点。2.我的“.side”文本在页面上的显示大约比“.main”文本的其余部分低一行。知道为什么吗？如果可能的话，我想将每个“.side”段落的顶部与其对应的“.main”段落的顶部对齐。回答问题1。CSS中的所有内容都与其容器相关。由于您使用的是75-25型号的容器的100%，CSS会看到您达到了100%的宽度，这意味着我们需要一条新的生产线。因此，任何宽度的组合加起来都可以达到99。我可能会采用的一种解决方案是将side类浮动到右侧。它仍将占包含它的div的25%，但会一直推到页面边缘。CSS为float:right；这也可以帮助您修复格式设置。

.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;
}

<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 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>