Javascript 如何使用CSS固定宽度和自动调整大小来设置div的样式？

我想创建宽度在800px到1000px之间的容器div

在内部，它有两个div，并希望将左div固定为250px

对于右div，我希望它自动调整宽度大小

HTML

---

您只需将

display:flex

添加到父级

.container

元素：

或者，您可以将父级的

显示
.container
元素设置为
表格
，然后将子元素设置为
显示：表格单元格
。如果希望子元素符合宽度，请在父元素上设置
table layout:fixed
：


这就行了。它使用
calc
（）

从
right
元素中删除
float:left


.container{
宽度：100%；
最小宽度：800px；
最大宽度：1100px；
背景色：#06F；
保证金：0自动；
高度：420px；
填充：10px 0px；
}
.左{
宽度：250px；
浮动：左；
高度：200px；
背景色：#0F0；
}
.对{
宽度：100%；
背景色：#F00；
高度：200px；
}

左分区
（固定为250px）
右分区
（宽度适合左侧蓝色区域）
您可以尝试删除红色div:D或
也许是这样：

已使用的表格要素；）

顶部div:
显示：表格

容器：
显示：表行

已移除左侧浮动
高度由父项决定：D
解决方案


.container{
宽度：100%；
最小宽度：800px；
最大宽度：1100px；
背景色：#06F；
保证金：0自动；
高度：420px；
填充：10px 0px；
}
.左{
宽度：250px；
浮动：左；
高度：200px；
背景色：#0F0；
}
.对{
宽度：100%；
背景色：#F00；
高度：200px；
}

左div

（固定为250px）
右分区

（宽度适合左侧蓝色区域）
Flex-box很不错。我们不是几天前在这件事上见过面吗？是的，那些人使用XP或Vista，他们默认会哭；移动电话怎么样。。。也许现在使用clac还为时过早。在这种情况下没有必要。calc比普通css快吗？所有现代移动浏览器都支持它。它正在我的Windows Phone 8.1上运行。我不知道它是否更快，我发现它更符合逻辑，需要更少的逻辑才能工作它的逻辑可能不那么合理，但更简单。您将节省一些位：d这个问题有很多解决方案，但是宽度很容易做到。身高是个问题<当您需要将元素设置为100%时，code>calc
确实是正确的，但是页眉或页脚也会占用空间。如果你知道他们有固定的高度，
calc
是你的朋友。
<div style="width: 100%;">
    <div class="container">
        <div class="left">
            Left div<br />(fixed to 250px)
        </div>
        <div class="right">
            Right div<br />(width fit to blue area left)
        </div>
    </div>
</div>

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;    
}
.left {
    width: 250px; 
    float: left; 
    height: 200px; 
    background-color: #0F0;
}
.right {
    width: 100%; 
    background-color: #F00; 
    height: 200px; 
    float: left;
}

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;
    display: flex;
}

.container {
    width: 100%; 
    min-width: 800px; 
    max-width: 1100px; 
    background-color: #06F; 
    margin: 0 auto; 
    height: 420px; 
    padding: 10px 0px;
    display: table;
    table-layout: fixed;
}
.left {
    width: 250px;
    height: 200px; 
    background-color: #0F0;
    display: table-cell;
}
.right {
    width: 100%; 
    background-color: #F00; 
    height: 200px;
    display: table-cell;
}

.right {
    width: calc(100% - 250px); 
    background-color: #F00; 
    height: 200px; 
    float: left;
}