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

【问题标题】：How to styling div with CSS fixed width and auto-resize?如何使用 CSS 固定宽度和自动调整大小来设置 div 样式？
【发布时间】：2015-01-31 22:24:53
【问题描述】：

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

里面有两个div，想把左边的div固定为250px。

对于正确的 div，我希望它自动调整宽度

jsfiddle examle

HTML

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

CSS

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

这样就可以了。它使用calc (http://jsfiddle.net/vn84nm30/6/)

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

【讨论】：

是的，那些人用 XP 或 Vista，他们默认会哭。
哈哈哈是的 ;D 手机怎么样？ ...也许使用 clac 还为时过早。在这种情况下并不需要。 calc 比普通 css 更快吗？
所有现代移动浏览器都支持它。它适用于我的 Windows Phone 8.1。我不知道它是否更快，我觉得它更合乎逻辑，并且它需要更少的逻辑来工作。
尝试删除 float: left on the red div ;) 它的逻辑可能更少，但更简单。你会节省一些位：D
这个问题有很多解决方案，但是宽度很容易解决。身高有问题。 calc 当你需要让一个元素具有 100% 的空间时，它确实是正确的，但是有一个页眉或页脚也会占用空间。如果您知道他们有固定的高度，calc 就是您的朋友。

【解决方案2】：

您可以简单地将display: flex 添加到父元素.container：

Updated Example

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

或者，您可以将父元素的display、.container 元素设置为table，然后将子元素设置为display: table-cell。如果您希望子元素尊重宽度，请在父元素上设置 table-layout: fixed：

Alternative Example Here

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

【讨论】：

弹性盒子很不错。几天前我们不是在这件事上认识的吗？

【解决方案3】：

解决方案

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

<div style="width: 100%; display: table; border-collapse: collapse; width: 100%; min-width: 800px; max-width: 1100px;">
    <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>

【讨论】：

【解决方案4】：

您可以尝试删除红色 div 上的 float:right :D 或可能是这样的：http://jsfiddle.net/vn84nm30/8/

使用的表格功能；）

顶部 div : display: table;

容器：display: table-row

移除了左浮动高度由父母决定：D

【讨论】：

【解决方案5】：

从right 元素中删除float: left。

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

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

【讨论】：