填充底部/顶部黑客用于具有不同宽度的响应式块

时间：2018-02-09 12:54:51

标签： html css css3

美好的一天。

我有以下任务：我想建立一个卡片网格（例如 - 新闻），这将保持其比例随浏览器宽度的变化。出于这个原因，我决定使用宽高比黑客来设置卡的高度（设置 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/的开发人员成功实现了这样的结果。请检查这个“示例”。

提前谢谢！

2 个答案:

答案 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。

因此，我们将根据最高卡的高度拉伸卡片。

相关问题
最新问题