垂直对齐内容
Posted
技术标签:
【中文标题】垂直对齐内容【英文标题】:Vertically justify content 【发布时间】:2016-10-19 21:58:52 【问题描述】:希望这不是一个未解决的任务,但我正在尝试垂直证明容器内未知(ish)数量的 div。
每个 div 之间的距离应相等,此外,与边缘的距离应相同。 (假设最后一部分可以使用前后的ghost元素来完成)
每个div都会填满容器的宽度,容器是设定的高度,但是容器内的元素个数是未知的。
我假设它可以在某种程度上使用 Flexbox 完成,但到目前为止我的尝试都没有成功。
【问题讨论】:
@Lowkase,我尝试了各种不同的解决方案,但主要问题是我不知道如何开始。 有几种可能性:justify-content: space-around
/ space-between
、auto
边距,甚至是弹性容器上的pseudo-elements
。所有内容都在这里:***.com/a/33856609/3597276
【参考方案1】:
像往常一样,无论我搜索多长时间,我都会在提出问题后立即找到答案。 :D
对于那些好奇的人,或者我自己未来的参考:Flexbox 的 justify DOES 工作,你只需要更多的选择:
html:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
.inner-element
width: 200px;
height: 10px;
background: blue;
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/
【讨论】:
【参考方案2】:是的,flexbox 是最简单的方法。
在容器元素上:
.container
display: flex;
flex-direction: column;
justify-content: space-between;
关于子元素:
.container div
flex: 1;
width: 100%
对于元素之间的间距,只需给容器添加内边距,给子元素添加底部边距。
样式如下所示:
.container
/* Same as above, and */
padding: 20px;
.container div
/* Same as above, and */
margin-bottom: 20px;
.container div:last-of-type
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
(我在你发布答案时正在输入这个,所以我还是把它放上来了)
Fiddle
【讨论】:
【参考方案3】:我使用justify-content:space-evenly
。
HTML:
div.container
display: flex;
div.one_item_container
display: flex;
flex-direction: column;
justify-content: space-evenly;
<div class="container">
<div class="one_item_container">
<img src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
【讨论】:
以上是关于垂直对齐内容的主要内容,如果未能解决你的问题,请参考以下文章
为啥这个 inline-block 元素的内容不是垂直对齐的