美好的一天。
我有以下任务:我想建立一个卡片网格(例如 - 新闻),这将保持其比例随浏览器宽度的变化。出于这个原因,我决定使用宽高比黑客来设置卡的高度(设置 padding-top )。
此解决方案适用于相同宽度的卡片。但我的设计使用普通卡和双。
我选择了“桌面优先”策略。所以我的目标是用起始高度保存卡片的比例 - 300px。
因此,在我的设计中,我的普通卡的起始大小为width: 380px and height: 300px
。 双卡,起始尺寸为width: 780px and height: 300px
。
对于每个案例,我都计算了padding-top
的值。对于普通卡:300/380 = 0,7894736842105263
,所以padding-top: 78.94836842105263%
。对于双卡:300/780 = 0,3846153846153846
,所以padding-top: 38.46153846153846%
。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #f0f0f0;
color: #323232;
}
.container {
max-width: 1600px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.row {
margin: 0 -10px;
}
.row::before, .row::after {
display: table;
content: '';
}
.row::after {
clear: both;
}
.col {
float: left;
width: 100%;
padding: 0 10px;
}
@media (min-width: 768px) {
.col--regular {
width: 50%;
}
}
@media (min-width: 920px) {
.col--regular {
width: 33.3333%;
}
.col--doubled {
width: 66.6666%;
}
}
@media (min-width: 1220px) {
.col--regular {
width: 25%;
}
.col--doubled {
width: 50%;
}
}
.card {
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
}
.card__title {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10px;
font-size: 18px;
font-weight: 700;
}
.card--regular {
padding-top: 78.94836842105263%;
}
.card--doubled {
padding-top: 38.46153846153846%;
}
<div class="container">
<div class="row">
<div class="col col--doubled">
<div class="card card--doubled" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Big card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
</div>
</div>
但是如果你看一下工作示例,当我们改变浏览器的宽度时,你会发现 double 卡的高度比常规更高。所以这打破了网格。
请告诉我我的错误是什么。或者如何解决这种情况。
链接到示例:https://codepen.io/dimitrysh/pen/jZBOzJ
UPD:来自https://ru.insider.pro/的开发人员成功实现了这样的结果。请检查这个“示例”。
提前谢谢!
答案 0 :(得分:0)
有趣的问题......
如果您希望高度完全相等,则需要以相同的方式计算它们。因此,让col - 加倍与col相同的宽度 - 常规。
现在,填充技巧对两者来说都是一样的。
汽车 - 加倍需要宽度:200%。我们需要调整间距,设置足够的边距以便加倍。
旁注:可能您可以考虑切换到网格显示。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #f0f0f0;
color: #323232;
}
.container {
max-width: 1600px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.row {
margin: 0 -10px;
}
.row::before, .row::after {
display: table;
content: '';
}
.row::after {
clear: both;
}
.col {
float: left;
width: 100%;
padding: 0 10px;
}
@media (min-width: 768px) {
.col--regular {
width: 50%;
}
}
@media (min-width: 920px) {
.col--regular {
width: 33.3333%;
}
.col--doubled {
width: 33.3333%;
margin-right: 33.33%;
}
}
@media (min-width: 1220px) {
.col--regular {
width: 25%;
}
.col--doubled {
width: 25%;
margin-right: 25%;
}
}
.card {
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
}
.card__title {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10px;
font-size: 18px;
font-weight: 700;
}
.card--regular, .card--doubled {
padding-top: 78.94836842105263%;
}
.card--doubled {
width: calc(200% + 20px);
}
<div class="container">
<div class="row">
<div class="col col--doubled">
<div class="card card--doubled" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Big card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular" style="background-image: url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80');">
<div class="card__title">
Regular card title
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
在我看来,我发现这个问题的灵活解决方案。
诀窍是将flexbox模块用于字符串。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #f0f0f0;
color: #323232;
}
.container {
max-width: 1180px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.row {
margin: 0 -10px;
}
.row::before, .row::after {
display: table;
content: '';
}
.row::after {
clear: both;
}
.col {
float: left;
width: 100%;
padding: 0 10px;
overflow: hidden;
}
@media (min-width: 768px) {
.col--regular {
width: 50%;
}
}
@media (min-width: 920px) {
.col--regular {
width: 33.3333%;
}
.col--double {
width: 66.6666%;
}
}
@media (min-width: 1220px) {
.col--regular {
width: 25%;
}
.col--double {
width: 50%;
}
}
.card {
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
background-image: url("https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc01c83c3da0425e9baa6c7a9204af81&auto=format&fit=crop&w=1350&q=80");
overflow: hidden;
}
.card__title {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10px;
font-size: 18px;
font-weight: 700;
}
.card--regular {
padding-top: 78.94836842105263%;
}
.card--double {
padding-top: 38.46153846153846%;
}
.flex-container {
width: 100%;
}
.flex-container .flex-row {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
}
<div class="container flex-container">
<div class="row flex-row">
<div class="col col--double">
<div class="card card--double">
<div class="card__title">
Big card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular">
<div class="card__title">
Regular card title
</div>
</div>
</div>
<div class="col col--regular">
<div class="card card--regular">
<div class="card__title">
Regular card title
</div>
</div>
</div>
</div>
</div>
注意css-classes flex-container
,flex-row
。
因此,我们将根据最高卡的高度拉伸卡片。