設置一個div的高度兄弟DIV

的百分比我已經三米連勝的兄弟姐妹的div：設置一個div的高度兄弟DIV

右格：具有由它的文本內容確定的高度覈實。

居中div：應該與右div的高度相匹配的div。

Left div：一個div，我想要設置爲右div的50％高度。使用帶有左Flexbox的

CSS嘗試DIV不工作：

.container { 
    display: flex; 
} 
.left { 
    width: 50px; 
    height: 50%; 
    background-color: lightcyan; 
} 
.center { 
    width: 50px; 
    background-color: lightcoral; 
} 
.right { 
    width: 300px; 
    background-color: palegreen; 
}

我發現只有這樣，才能讓左div來計算右div的高度的百分比是使用position: absolute，如this answer。

絕對定位並不理想，因爲它阻止我使用正常的佈局流程在一行中設置三個div彼此相鄰。

有沒有什麼辦法可以將Left div設置爲Right div高度的百分比，而無需使用固定的水平佈局將三個div設置爲一行？

佈局只需要在最近的Chrome中工作，所以瀏覽器不兼容性不是問題。我願意使用flexbox或表格佈局解決方案。

來源

2014-11-04 Jeremy

除非你把他們包含的元素中，並設置了高度，那麼有沒有辦法做到這一點只用CSS。 – TylerH 2014-11-04 18:25:59

我知道你已經發布了一個答案的鏈接，包括這個作爲解決方法：http://jsfiddle.net/h7gc12wb/5/，但你也寫道'「絕對定位不太理想，因爲它阻止我使用正常的佈局流程來設置三個div彼此相鄰「'。當你在'.left'的孩子上使用'position：absolute;'時，你不會有這個問題。 – 2014-11-04 18:41:05

我不知道你的HTML結構有什麼限制。但一個簡單的方法來做你想做的就是將left div設置爲一個等高table-cell div，並在裏面設置一個高度爲50%的內部div。也不會影響要素流動：

Updated JsFiddle

.container { 
 
    display: table; 
 
} 
 

 
.left { 
 
    display: table-cell; 
 
    position: relative; 
 
    width: 50px; 
 
} 
 

 
.left > div { 
 
    background-color: lightcyan; 
 
    height: 50%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
.center { 
 
    display: table-cell; 
 
    width: 50px; 
 
    background-color: lightcoral; 
 
} 
 
.right { 
 
    display: table-cell; 
 
    width: 300px; 
 
    background-color: palegreen; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <div></div> 
 
    </div> 
 
    <div class="center"></div> 
 
    <div class="right"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor vitae ante quis suscipit. 
 
    </div> 
 
</div>

來源

2014-11-04 18:42:25 LcSalazar

設置一個div的高度兄弟DIV

回答

相關問題