垂直对齐不起作用

-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

垂直对齐不起作用

回答

相关问题