垂直對齊不起作用

-2

我有3個以上的子節點和一個父div。我想像磚塊一樣對齊div。但是div沒有正確定位。孩子在兩個div之間的底部消耗不需要的空間。垂直對齊不起作用

每個小孩div都有不同的高度，所以display: flex屬性在父項中無效。在父div中嘗試使用column-count屬性，並且它在Chrome中無法正常工作。

.container { 
 
    border: 1px black solid; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
} 
 

 
.small { 
 
    float: left; 
 
    width: 100px; 
 
    border: 1px black solid; 
 
    background: aliceblue; 
 
}

<div class="container"> 
 
    <div class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</div> 
 
    <div class="small">It has survived not only five centuries.</div> 
 
    <div class="small">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div> 
 
    <div class="small">more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div> 
 
    <div class="small">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</div> 
 
    <div class="small">Latin literature from 45 BC, making it over 2000 years old.</div> 
 
    <div class="small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div> 
 
</div>

來源

2017-09-06 Vimal

使用'flexbox'。嘗試使用https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Abinthaha

我不認爲這是可能的浮法，至少如果你想完全動態的方式。 – golddragon007

試試這個它應該工作

.container{ 
    border: 1px black solid; 
    overflow: hidden; 
    vertical-align: top; 
    display:flex; 
} 

.small{ 
    float: left; 
    width: 100px; 
    border: 1px black solid; 
    background: aliceblue; 
    align-self: center; 
}

http://jsfiddle.net/8g9cycs8/

來源

2017-09-06 06:59:30

您可以使用CSS-Masonry LAYO UT。看到這個鏈接：http://w3bits.com/css-masonry/

來源

2017-09-06 07:18:25 bellabelle

請使用柔性盒它將很容易解決問題。

.Container { 
    display: flex; 
    justify-content: flex-start; 
}

來源

2017-09-06 07:20:02 janaravi

垂直對齊不起作用

回答

相關問題