Question

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

在里面，它有两个div，并希望将左div修复为250px。

对于正确的div我想让它自动调整宽度

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

Answer 1

您只需将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;
}

Answer 2

您可以尝试删除浮动：右侧红色div：D或也许是这样的：http://jsfiddle.net/vn84nm30/8/

使用过的表格功能;）

top div：display: table;

容器：display: table-row

删除了左边的浮动高度由父母决定：D

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

Answer 4

这样做。它使用calc（http://jsfiddle.net/vn84nm30/6/）

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

Answer 5

从float: left元素中删除right。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用CSS固定宽度设置div并自动调整大小？

5 个答案: