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

我想创建容器 div的宽度在800px到1000px之间。如何使用CSS固定宽度和自动调整大小来设置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; 
}

来源

2015-01-31 Marcus

这将做到这一点。它使用calc（http://jsfiddle.net/vn84nm30/6/）

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

来源

2015-01-31 22:28:26 Mouser

Internet Explorer 8会哭泣D：http://caniuse.com/#search=calc – KARC 2015-01-31 22:32:08

是的，这些人使用XP或Vista，他们默认哭泣。 – Mouser 2015-01-31 22:33:44

哈哈哈是的; D手机怎么样？ ...也许它早期使用clac。在这种情况下没有必要。计算速度是否正常css？ – KARC 2015-01-31 22:37:10

你可以简单地添加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; 
}

或者，你可以.container元素设置父的display，以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; 
}

来源

2015-01-31 22:27:30

柔性盒是好的。前几天我们没有见过面吗？ – Mouser 2015-01-31 22:29:42

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

来源

2015-01-31 22:28:50

你可以尝试删除浮动：权上的红格：d或也许是这样的：http://jsfiddle.net/vn84nm30/8/

使用的表的功能;）

顶格： display: table;

container：display: table-row

除去浮左高度由父决定：d

来源

2015-01-31 22:31:14 KARC

解

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

来源

2015-01-31 22:37:26

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

回答

相关问题