Question

这个问题已被问过一百次，所以我再次提出要求。其他问题根本无法解决我的问题。已经尝试了2个小时，所以我有点沮丧，真的需要一些帮助。

我有一个里面有2个div的部分。我试图让左边的div为100％ - 200px和剩下的任何剩下的div。但无论我尝试什么，div都会继续围绕他们的内容。

我已经设置了一个jsfiddle来保持这个问题有点短：

这是需要的css部分：

section {
width: 100%;
height: 100%;
border: 2px solid green;
}
.box1 {
float: left;
width: calc(100% -200px);
border: 2px solid red;
display: block;
}
.box2 {
float: left;
margin-left: 5px;
width: 180px;
border: 2px solid blue;
display: block;
}

Answer 1

在calc：

中的减号后面只需要一个空格

width: calc(100% - 200px);

Answer 2

你想要＆＃34;左边的div是100％ - 200px而右边的div是剩下的＆＃34;。剩余区域将始终为200px。

相反，尝试向左做<div> 200px和左<div>。然后，您不需要使用calc()，其browser compatibility有限。

这样的事情：

<section>
    <div class="boxR"></div>
    <div class="boxL"></div>
</section>

section {
    min-width:300px;
}

div.boxR,
div.boxL {
    min-height:200px;
}

div.boxR {
    float:right;
    width:180px;
    background-color:#CCC;
}

div.boxL {
    margin-right:200px;
    background-color:#555;
}

WORKING EXAMPLE

阻止div包装内容？

2 个答案: