【问题标题】:flexbox align items messflexbox对齐项目混乱
【发布时间】:2017-03-19 21:50:49
【问题描述】:

我想获得与我的草图类似的效果。

https://postimg.org/image/o03qu4tpp/

该男子始终应放置在标题的右下角。并且转盘应该在中间/中间偏左的位置(头部高度的 50%)。

我在标题容器中添加了新类 (pad4),并使用了 flexbox。

display: flex;

调整内容:弹性结束; 对齐项目:flex-end;

现在,一个人在左下角,文字在右上角。我现在不知道如何解决。因为当我使用边距或填充时,什么也没有发生。

网站:http://jarmor.webd.pl/designs/kovta/agency2a.html

【问题讨论】:

  • 寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。虽然您提供了link to an example or site,但如果链接失效,您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。

标签: html css flexbox


【解决方案1】:

display: flex 必须应用于父元素,以便将子元素视为弹性元素。因此,您应该将display: flex; align-items: flex-end; 应用于您的<header> 元素。然后,将align-self: center 应用于滑块容器(在您的情况下为 div.container-fluid.pad4)。结果如下:

【讨论】:

    猜你喜欢
    • 2018-08-21
    • 2021-03-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-08
    • 1970-01-01
    • 2021-08-07
    • 2018-12-23
    相关资源
    最近更新 更多