html - css中的等高列,除了一列
问题描述
我需要使用 flexbox 或 css 中的任何其他方法创建等高卡片。但是其中一张卡片的顶部会有一条丝带。这将在反应中动态设置。
所以我需要创建除一张之外的等高卡片。像下面这样的东西,
一个例子在这里, https://codepen.io/andichamy-ga/pen/MGJPXv
HTML:
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar<br>
foo
</div>
</div>
<div class="some">
<div class="recommended">Recommended Card</div>
<div class="box">
foo<br>
</div>
</div>
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br>
bar
</div>
</div>
</div>
CSS:
.container {
display: flex;
}
.some {
padding: 20px;
margin-right: 20px;
}
.recommended {
background-color: yellow;
width: 200px;
height: 20px;
padding: 5px 10px;
}
.one {
background-color: transparent;
}
.box {
width: 200px;
height: 150px;
background-color: green;
padding: 10px;
}
我尝试了许多不同的方式。但这些似乎都不是正确的方法。我怎样才能优雅地做到这一点?
解决方案
您可以将顶部功能区设置为绝对位置,并依靠 flexbox 使其余功能区具有相同的高度:
* {
box-sizing:border-box;
}
body {
background-color: #a3d5d3;
}
.container {
display: flex;
}
.some {
margin-top:50px;
margin-right: 30px;
position:relative;
}
.recommended {
position:absolute;
background-color: yellow;
left:0px;
right:0px;
height: 40px;
top:-40px;
padding: 5px 10px;
}
.one {
background-color: transparent;
}
.box {
width: 200px;
height:100%;
background-color: green;
padding: 10px;
}
<div class="container">
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br> bar
<br> foo bar
<br> foo bar
<br>
</div>
</div>
<div class="some">
<div class="recommended">Recommended Card</div>
<div class="box">
foo<br>
</div>
</div>
<div class="some">
<div class="recommended one"></div>
<div class="box">
foo<br> bar
</div>
</div>
</div>
推荐阅读
- c# - 处理 --> Arduino --> 通过端口进行 Unity 通信
- javascript - 使用 PointerLockControls 时禁用转义选项
- python - 有没有办法直接在 Jupyter 单元中调用 await ?
- java - 如何使用弹簧集成创建异步单例套接字服务器?
- json - 将字符附加到 MS SQL 2017 中生成的 JSON
- javascript - 注销管理路由后反应路由器4
- owl - 如何用 OWL 或 SWRL 推断这种“间接”断言?
- html - 在谷歌分析中,一个 URL 正在获取不存在的视图
- jquery - 共享点中的 REST POST 不发布数据
- c - 在 C 中,为什么要定义两个不同的运算符(. 和 ->)来处理结构?