靈活的寬度div旁邊的固定寬度div

今天我面臨一個具有挑戰性的情況（至少對我而言）。靈活的寬度div旁邊的固定寬度div

其實我必須讓一些div靈活在一個父div裏面，並有另一個固定div作爲'brother'。根據父母的寬度，這些靈活的div必須是100％。

在這裏你去做出瞭解釋我的情況的圖片：

print-squeme

我的想法是這樣的：

.parent { 
 
    width: 500px; /* this value can change any time */ 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
    float: left; 
 
} 
 

 
.parent div { 
 
    float: left; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    
 
} 
 

 
.flexible { 
 
    width: calc(100% - 100px); /* IT IS NOT WORKING AS I WOULD LIKE */ 
 
}

<div class='parent'> 
 
    <div class='fixed'>*fixed</div> 
 
    <div class='flexible'>*flexible 1</div> 
 
    <div class='flexible'>*flexible 2</div> 
 
</div>

有人能幫助我嗎？

感謝

來源

2017-06-21 Mineiro-DF

您可以爲此使用flexbox。你應該將你的兩個靈活的div包裝在一個容器中，以便它們堆疊起來。然後您可以將父項設置爲display: flex; flex-direction: row;。然後將柔性包裝紙設置爲display: flex; flex-direction: column;，並將柔性包裝紙和柔性包裝紙上的flex-grow: 1設置爲使其展開以填充垂直和水平空間。

.parent { 
 
    width: 500px; 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.parent div { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.flexcontainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
} 
 

 
.fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
} 
 

 
.flexible { 
 
    flex-grow: 1; 
 
}

<div class='parent'> 
 
    <div class='fixed'>*fixed</div> 
 
    <div class="flexcontainer"> 
 
    <div class='flexible'>*flexible 1</div> 
 
    <div class='flexible'>*flexible 2</div> 
 
    </div> 
 
</div>

來源

2017-06-21 19:04:36 sorayadragon

這是最好的答案。非常感謝你！ –

嗨，夥計，現在我看到它無法正常使用Safari。你知道爲什麼嗎？ –

我的猜測是支持。Safari上列出了一些已知問題：https://caniuse.com/#feat=flexbox – sorayadragon

以你的代碼爲基礎，您可以添加left和margin-left到.flexible。還需要更改width，以便計算填充和容器。

.flexible { 
    left: 0; 
    margin-left: 10px; 
    width: calc(100% - 120px); /* IT IS NOT WORKING AS I WOULD LIKE */ 
}

來源

2017-06-21 18:57:11

您可以使用flexbox來實現此佈局。

.parent { 
 
    display: inline-flex;  /* 1 */ 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
} 
 

 
.sub-container {   /* 2 */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch;  /* 3 */ 
 
} 
 

 
.flexible { 
 
    flex: 1;     /* 4 */ 
 
    border: 1px solid black; 
 
} 
 

 
.sub-container > div + div { 
 
    margin-top: 5px; 
 
} 
 

 
.fixed { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<div class='parent'> 
 
    <div class='fixed'>*fixed</div> 
 
    <div class='sub-container'> 
 
    <div class='flexible'>*flexible 1</div> 
 
    <div class='flexible'>*flexible 2 *flexible 2 *flexible 2</div> 
 
    </div> 
 
</div>

注：

行內柔性容器。（它會根據其內容的寬度進行調整。）
爲靈活的div創建子容器。也使用flex屬性。
柔性容器的初始設置是align-items: stretch。這意味着flex項目會自動擴展以涵蓋cross axis的全部長度。在這種情況下，這就是寬度。
將容器中的垂直空間均勻分配到兩個彈性項目中。

來源

2017-06-21 19:00:56

使用Flexbox的的想法是真的有效！謝謝。 –

它不適用於SAFARI。爲什麼？ –

什麼在Safari中不起作用？我剛剛測試過，看起來不錯。 –

靈活的寬度div旁邊的固定寬度div

回答

相關問題