如何使用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的樣式？

回答

相關問題