元素高度依賴父代而不是內容？

Question

我有3個容器，一個是Total（紅色邊框），裏面有Left（黃色邊框，包含圖片）和Right（藍色邊框，包含文字）。

左側設置爲大約30％，float：left;而右側設置爲70％，浮動：右側;

現在，我想要實現的是以下內容：我希望兩者都具有Total的高度，而Total仍然以某種方式依賴於內容 - 所以我可以將位置的左右兩邊的內容居中進入Total（紅色）的中間，並帶有margin-top，margin-bottom = auto;

1）我不能在Total上固定高度，它可以固定高度，但內容會在狹窄時溢出（否則它只是可笑地爲空）。

2）這裏是元素的視頻，以清楚地瞭解我想要達到的目標。我也更喜歡沒有js。 https://my.mixtape.moe/kxoobz.webm

Answer 1

您可以使用flexbox達到你想要什麼：

.total { 
 
    display: flex; 
 
} 
 

 
.red { 
 
    border: 2px solid red; 
 
    flex: 1 0 30%; /* fill 30% width */ 
 
} 
 

 
.yellow { 
 
    border: 2px solid yellow; 
 
    flex: 1 0 70%; 
 
}

<div class="total"> 
 
    <div class="red"> 
 
    <img src="http://placehold.it/150x150"> 
 
    </div> 
 
    <div class="yellow"> 
 
    Quisque porttitor, ipsum vel elementum ultricies, magna arcu scelerisque massa, et laoreet elit felis nec urna. Praesent suscipit leo at ullamcorper rutrum. Suspendisse potenti. Phasellus pretium mauris id lacus dapibus finibus. Nunc placerat est quis nisi aliquet, ac aliquet leo sagittis. Donec quis aliquet neque. Suspendisse potenti. In vestibulum nisl ut risus fermentum tempor sed at arcu. Aenean at ante turpis. Integer nec dolor placerat diam vulputate consequat. Cras consectetur mi scelerisque massa accumsan auctor. Nunc imperdiet lacus eget justo luctus molestie. In dignissim lectus eget feugiat tincidunt. Vestibulum tempus est risus, eget suscipit turpis molestie id. 
 
    </div> 
 
</div>