CSS：在这个Flex容器中，如何< li>自动移动到空的空间

13z8s7eq  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(92)

在这个日历中，在日期6之后，我添加了一个新的

  • 以包含“即将到来的事件”图像，该图像应具有2列高度。理想情况下，日期8应该移到6以下，9应该移到7以下，以填补空间，但它没有这样做。

感谢您的任何帮助和建议！

.event_calendar ul {
  padding: 0 20px;
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  color: #000000;
  text-align: center;
}

.event_calendar .days {
  margin-bottom: 20px;
  justify-content: space-between;
}

.event_calendar li {
  display: flex;
  color: #333;
  width: calc(100% / 5);
}

.event_calendar .days li {
  z-index: 1;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
  margin-top: 5px;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li::before {
  position: absolute;
  content: "";
  height: 100px;
  width: 100px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.event_date::before {
  position: absolute;
  content: "";
  background: #f2f2f2;
  background-image: url('https://st2.depositphotos.com/1635204/7654/i/450/depositphotos_76549817-stock-photo-word-events-on-colorful-wooden.jpg');
  background-size: cover;
  height: 100px;
  width: 100px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.upcoming_event_preview {
  z-index: 1;
  cursor: pointer;
  position: relative;
  justify-content: center;
  margin-top: 5px;
  width: 300px;
  height: 250px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li.upcoming_event_preview::before {
  position: absolute;
  content: "";
  background-image: url('https://clipart-library.com/img1/1038152.png');
  background-size: contain;
  margin: 5px;
  width: 300px;
  height: 250px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -10%);
}
<div class="event_calendar">
  <ul class="days">
    <li class="event_date"> 1 </li>
    <li class="event_date"> 2 </li>
    <li class="event_date"> 3 </li>
    <li class="event_date"> 4 </li>
    <li class="event_date"> 5 </li>
    <li class="event_date"> 6 </li>
    <li class="upcoming_event_preview"></li>
    <li class="event_date"> 7 </li>
    <li class="event_date"> 8 </li>
    <li class="event_date"> 9 </li>
    <li class="event_date"> 10 </li>
    <li class="event_date"> 11</li>
    <li class="event_date"> 12 </li>
  </ul>
</div>

我试过玩FlexBox，但到目前为止没有任何工作。（我不想通过做flex: 1使任何日期拉伸和填充）

css

1条答案

按热度按时间
ftf50wuq

ftf50wuq1#

因为flexbox不能得到这里的结果，所以这里有一个使用display: grid的例子;
我评论了CSS。

注意：我确实使用了原始问题中设置的列的原始特定px值，例如100 px。我建议将这些更改为百分比值或其他可以响应浏览器大小变化的值。

.event_calendar ul {
  padding: 0 20px;
  display: grid; /* GRID */
  list-style: none;
  color: #000000;
  grid-template-columns: repeat(5, 100px); /* SET THE COLUMNS - 5, repeats 100px */
  grid-template-rows: repeat(4, 25%); /* SET 4 ROWS, EQUAL HEIGHT */
  grid-gap: 10px; /* USE GAP INSTEAD OF MARGIN */
  text-align: center;
}

.event_calendar .days {
  margin-bottom: 20px;
}

.event_calendar li {
  display: flex;
  color: #333;
 }

.event_calendar .days li {
  z-index: 1;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li::before {
  position: absolute;
  content: "";
  height: 100px;
  width: 100px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.event_date::before {
  position: absolute;
  content: "";
  background: #f2f2f2;
  background-image: url('https://st2.depositphotos.com/1635204/7654/i/450/depositphotos_76549817-stock-photo-word-events-on-colorful-wooden.jpg');
  background-size: cover;
  height: 100px;
  width: 100px;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.upcoming_event_preview {
  z-index: 1;
  cursor: pointer;
  position: relative;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  grid-column: 2/span 3; /* POSITION THE IMAGE LI IN THE 2ND COLUMN AND MAKE IT SPAN 3 COLUMNS TOTAL */
  grid-row: 2/span 2; /* POSITION THE IMAGE LI IN THE 2ND ROW AND MAKE IT SPAN 2 ROWS TOTAL */
}

.days li.upcoming_event_preview::before {
  position: absolute;
  content: '';
  /* a little house keeping for the image to be in the middle of the li element */
  background-image: url('https://clipart-library.com/img1/1038152.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translate(0%, -10%);
}
<div class="event_calendar">
  <ul class="days">
    <li class="event_date"> 1 </li>
    <li class="event_date"> 2 </li>
    <li class="event_date"> 3 </li>
    <li class="event_date"> 4 </li>
    <li class="event_date"> 5 </li>
    <li class="event_date"> 6 </li>
    <li class="upcoming_event_preview"></li>
    <li class="event_date"> 7 </li>
    <li class="event_date"> 8 </li>
    <li class="event_date"> 9 </li>
    <li class="event_date"> 10 </li>
    <li class="event_date"> 11</li>
    <li class="event_date"> 12 </li>
  </ul>
</div>

响应式

.event_calendar ul {
  padding: 0 20px;
  display: grid;
  /* GRID */
  list-style: none;
  color: #000000;
  grid-template-columns: repeat(5, calc(20% - 10px));
  /* SET THE COLUMNS - 5, repeats 20% - 10px to account for the gap */
  grid-template-rows: repeat(4, 25%);
  /* SET 4 ROWS, EQUAL HEIGHT */
  grid-gap: 10px;
  /* USE GAP INSTEAD OF MARGIN */
  text-align: center;
}

.event_calendar .days {
  margin-bottom: 20px;
}

.event_calendar li {
  display: flex;
  color: #333;
}

.event_calendar .days li {
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100px;
  cursor: pointer;
  position: relative;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.days li::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 5px;
  transform: translate(0%, -30%);
}

.days li.event_date::before {
  position: absolute;
  content: "";
  background: #f2f2f2;
  background-image: url('https://st2.depositphotos.com/1635204/7654/i/450/depositphotos_76549817-stock-photo-word-events-on-colorful-wooden.jpg');
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 5px;
}

.days li.upcoming_event_preview {
  z-index: 1;
  cursor: pointer;
  position: relative;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  grid-column: 2/span 3;
  /* POSITION THE IMAGE LI IN THE 2ND COLUMN AND MAKE IT SPAN 3 COLUMNS TOTAL */
  grid-row: 2/span 2;
  /* POSITION THE IMAGE LI IN THE 2ND ROW AND MAKE IT SPAN 2 ROWS TOTAL */
}

.days li.upcoming_event_preview::before {
  position: absolute;
  content: '';
  /* a little house keeping for the image to be in the middle of the li element */
  background-image: url('https://clipart-library.com/img1/1038152.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translate(0%, -10%);
}
<div class="event_calendar">
  <ul class="days">
    <li class="event_date"> 1 </li>
    <li class="event_date"> 2 </li>
    <li class="event_date"> 3 </li>
    <li class="event_date"> 4 </li>
    <li class="event_date"> 5 </li>
    <li class="event_date"> 6 </li>
    <li class="upcoming_event_preview"></li>
    <li class="event_date"> 7 </li>
    <li class="event_date"> 8 </li>
    <li class="event_date"> 9 </li>
    <li class="event_date"> 10 </li>
    <li class="event_date"> 11</li>
    <li class="event_date"> 12 </li>
  </ul>
</div>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com