Html “其他”中的2个div；货柜；div-自适应宽度

我的css有问题。我有两个div“left”和“main”在一个container div“container”中。我的容器的宽度是90℅ 主体的宽度，并具有边距：%3自动（用于使容器居中）

现在，我想要在我的容器中有一些特别的想法：我的“左”宽度=容器的20%，在这个“左div”上有一个右边的边距来分隔“左”和“主”

我的main的宽度必须占容器的其余宽度

#main {
background-color:#32CD32;
vertical-align:top;
display:inline-block;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 2px black;
text-align:center;
/*width:80%; HERE, I WANT AN ADAPTABLE WIDTH TAKING THE REST OF THE CONTAINER*/}

<div class="container">
<div id="left">
<li>LIST1</li>
<li>LIST2 </li>
<li>LIST3 </li></div>
<div id="main">
    <div id="new_comment"class="eblock">new comment</div>
    <div id="comments"class="eblock">
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    </div>
</div>
</div>

但当我用%表示主体的宽度和左侧的宽度时，它会占用主体℅. 此外，我不知道怎么说“拿走容器的其余宽度

#main {
background-color:#32CD32;
vertical-align:top;
display:inline-block;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 2px black;
text-align:center;
/*width:80%; HERE, I WANT AN ADAPTABLE WIDTH TAKING THE REST OF THE CONTAINER*/}

<div class="container">
<div id="left">
<li>LIST1</li>
<li>LIST2 </li>
<li>LIST3 </li></div>
<div id="main">
    <div id="new_comment"class="eblock">new comment</div>
    <div id="comments"class="eblock">
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    </div>
</div>
</div>

清单1
清单2
清单3
新评论
新评论
新评论
新评论
新评论
新评论

---

感谢您的帮助。

您遇到的问题来自CSS所做的一件称为框大小的事情。这会告诉浏览器如何布局框（例如，您的

div

元素）

现代浏览器使用的默认框大小称为

填充框

。它计算框的宽度（在您的示例中为

#容器

的20%或80%），然后将填充和边框添加到计算的宽度。这意味着您的元素最终占用的空间比您最初预期的要多

一种可能的解决方案是覆盖默认的框大小。设置

框大小：边框框

会告诉浏览器在计算宽度时包括填充和边框，即这些值包含在容器宽度的20%中。许多人建议只在所有元素上设置此值（请参阅主题的）

在您的情况下，我建议设置：

#left {
    width: 20%;
    margin-right: 5%;
}

#main {
    width: 75%;
}

---

现在，在某些情况下，浏览器必须对值进行舍入。因此，最终的值总和可能超过可用空间。如果出现这种情况，只需使用一些百分比（例如，设置

右边距：4%

）.

您遇到的问题来自CSS所做的一件事，即框大小调整。这会告诉浏览器如何布局框（例如，您的

div

元素）

现代浏览器使用的默认框大小称为

填充框

。它计算框的宽度（在您的示例中为

#容器

的20%或80%），然后将填充和边框添加到计算的宽度。这意味着您的元素最终占用的空间比您最初预期的要多

一种可能的解决方案是覆盖默认的框大小。设置

框大小：边框框

会告诉浏览器在计算宽度时包括填充和边框，即这些值包含在容器宽度的20%中。许多人建议只在所有元素上设置此值（请参阅主题的）

在您的情况下，我建议设置：

#left {
    width: 20%;
    margin-right: 5%;
}

#main {
    width: 75%;
}

现在，在某些情况下，浏览器必须对值进行舍入。因此，最终的值可能会超过可用空间。如果出现这种情况，只需使用一些百分比（例如，设置

右边距：4%

）。

给你

灵感来自

来吧

---

受

Thank man的启发，我修改了我的代码并成功了，但由于这次更新，我还有一个问题：/（我编辑了帖子）Thank man，我修改了我的代码并成功了，但由于这次更新，我还有一个问题：/（我编辑了帖子）如果您有新问题，请发表新文章，而不是编辑现有问题。如果您进行编辑，则会使给出的所有答案无效。如果您有新问题，请发表新文章，而不是编辑现有问题。如果您进行编辑，则会使给出的所有答案无效。