P粉2037924682023-08-22 12:35:59
您需要為兩個子div新增vertical-align
屬性。
如果.small
總是較短,則只需將該屬性套用到.small
。
但是,如果其中任何一個可能是最高的,則應將此屬性套用到.small
和.big
。
.container{ border: 1px black solid; width: 320px; height: 120px; } .small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align: top; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; vertical-align: top; }
垂直對齊影響內聯或表格單元格框,這個屬性有很多不同的值。請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align以了解更多詳情。
P粉8232680062023-08-22 09:52:17
因為預設情況下,vertical-align
被設定為baseline。
改用vertical-align:top
:
.small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align:top; /* <---- this */ }
http://jsfiddle.net/Lighty_46/RHM5L/9/
#或如@f00644所說,你也可以對子元素應用float
。