我快速跟进了我之前发布的问题 here .
我正在尝试根据另一个子元素是否存在来定位 flexbox 子元素。
最佳视觉效果在此 codepen
在某些面板中,ICON3 不会被加载。容器收到一个 hidden
类,我可以选择用 display
或 opacity
等来隐藏它。
我希望 ICON4 保持在右侧,并向上移动与 ICON2 一致,并相应地调整包装器的大小。但我似乎无法让它工作。
我尝试过的:
不透明度:0
- 这使 ICON4 保持在右侧,但不会调整包装器的大小,因为 ICON3 仍然存在并占用空间。
display: none
- 这只是将 ICON4 移动到 ICON3 所在的位置。
还尝试使用 .hidden + .four
进行样式组合,但我找不到可行的解决方案。
非常感谢任何帮助!
下面的片段:
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
margin-bottom: 2em;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
justify-content: space-around;
}
.hidden {
opacity: 0;
/*display: none; // this pushes ICON4 underneath */
}
.hidden + .four {
/*margin-bottom: 1.4em; // this seems to position .four correctly, but doesn't alter height of .wrapper */
}
.four {
margin-top: auto;
}
.ideal {
position: absolute;
bottom: 20px;
right: -44px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}
.ideal {
position: absolute;
bottom: 32px;
right: -201px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}
<div class="wrapper">
<div class="image">
<img src="http://placehold.it/150x68" alt="" />
</div>
<div class="row">
<span>Text content</span>
<span>Text content</span>
<span>Text content</span>
<div class="more">
<span class="one">ICON1
</span>
<span class="two">ICON2</span>
<span class="three hidden">ICON3</span>
<span class="four">ICON4</span>
</div>
</div>
<div class="ideal"><span>ICON4</span>< ideal position and wrapper to resize</div>
</div>
最佳答案
我忽略了.more
上的高度规则
我不认为我用 css 改变它,因为它是父级,但使用 javascript 我可以向 .more
添加一个类并覆盖高度。
关于html - 如何根据另一个 child 的存在来定位这个 flexbox child ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41747663/