Question

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

.container{
margin:3% auto;
width:90%;}

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

#left {
display:inline-block;
padding:10px;
background-color:#32CD32;
vertical-align:top;
list-style:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 2px black;
/*width:????? HERE I WANT AN ADAPTABLE WIDTH TAKING 20% OF THE CONTAINER WIDTH*/}

我的主要宽度必须占据容器宽度的其余部分。

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

感谢您的帮助。

Answer 1

你遇到的问题来自于CSS所谓的盒子大小调整。这告诉浏览器如何布置您的框（例如您的div元素）。

现代浏览器使用的默认大小调整称为padding-box。它会计算框的宽度（在您的示例中为#container的20％或80％），然后将填充和边框添加到计算出的宽度。这意味着您的元素最终会占用比您最初预期更多的空间。

一种可能的解决方案是覆盖默认的大小调整大小。设置box-sizing: border-box告诉浏览器在计算宽度时包括填充和边框，即这些值包含在容器宽度的20％中。很多人建议只对所有元素进行设置（请参阅主题的Paul Irish's article）。

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

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

#main {
    width: 75%;
}

现在，在某些情况下，浏览器必须舍入值。因此，您最终可能会得到总和超过可用空间的值。如果发生这种情况，只需使用一些百分比（例如设置margin-right: 4%）。

Answer 2

你去吧

Working jsfiddle

.container {
    width:90%;
    height:200px;
    border:1px solid;
}

.left {
    width:auto;
    height:200px;
    background:red;
    overflow:hidden;

 }

.main {
    height:200px;
    width:60%;
    background:blue;
    float:left;
    margin-right: 10px;
 }

灵感来自https://stackoverflow.com/a/1767270/5999686

另一个“容器”div中的2 div - 适应宽度

2 个答案: