主页 / 问题 / 1604475
Accepted
maindenis
Asked:2025-01-10 01:22:17 +0800 CST2025-01-10 01:22:17 +0800 CST

通过元素设置样式

  • 772

这是布局 在此输入图像描述

这就是我的方式 在此输入图像描述

这是 HTML

.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumb {
  display: flex;
  width: 50%;
  background: #E4E7F6;
}

.thumb:nth-child(odd) {
  background: #fff;
}
<div class="thumbnails">
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
  <div class="thumb">
    <o>Текст</o>
  </div>
</div>

您需要按照布局分配颜色。如何做到这一点？

javascript

2 个回答

  1. Best Answer

    我做到了，但不知道 HTML 结构是否可以改变。我将 2 包裹thumb在and 中，通过andthumb-row的形式样式，仅通过指定它们 not , but 。 我也立即将里面的元素缩进了，这样你就不用担心了。oddeventhembthumb-row
    thumb

    * {
  margin: 0;
  box-sizing: border-box;
}
.thumbnails {
  display: block;
  width: 100%;
}
.thumb-row {
  display: flex;
}

.thumb {
  display: flex;
  align-items: center;
  width: 50%;
  height: 58px;
  background: #E4E7F6;
  position: relative;
}
.thumb-row:nth-child(odd) .thumb:first-child {
  padding: 0 50px 0 15px;
}
.thumb-row:nth-child(odd) .thumb:nth-child(2) {
  padding: 0 15px;
}
.thumb-row:nth-child(even) .thumb:first-child {
  padding: 0 50px 0 15px;
}
.thumb-row:nth-child(even) .thumb:nth-child(2) {
  padding: 0 15px 0 50px;
}
.thumb-row:nth-child(even) .thumb:first-child {
  background: #fff;
}
.thumb-row:nth-child(odd) .thumb:nth-child(2) {
  background: #fff;
}
.thumb-row .thumb:before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 10;
  display: inline-block;
  width: 0; 
  height: 0; 
}
.thumb-row:nth-child(even) .thumb:first-child:before {
  right: 0;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(90deg) translate(12px, -46px);
  
}
.thumb-row:nth-child(odd) .thumb:nth-child(2):before {
  left: 0;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(-90deg) translate(-12px, -46px);
}
    <div class="thumbnails">
  <div class="thumb-row">
    <div class="thumb">
      <o>Текст Текст Текст Текст Текст Текст Текст Тексn tewtw</o>
    </div>
    <div class="thumb">
      <o>Текст</o>
    </div>
  </div>
  <div class="thumb-row">
    <div class="thumb">
      <o>Текст</o>
    </div>
    <div class="thumb">
      <o>Текст</o>
    </div>
  </div>
  <div class="thumb-row">
    <div class="thumb">
      <o>Текст</o>
    </div>
    <div class="thumb">
      <o>Текст</o>
    </div>
  </div>
</div>

    • 1

  2. 为了解决这个问题，可以使用伪类和元素选择。例如像这样

    .thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumb {
  position: relative;
  display: flex;
  width: 50%;
  background: #fff;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.thumbnails .thumb:nth-child(1),
.thumbnails .thumb:nth-child(4),
.thumbnails .thumb:nth-child(5) {
  background: #e4e7f6;
}

.decor-triangle:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #fff transparent transparent;
  z-index: 1;
  transform: rotate(0deg);
}
.decor-triangle-right:before {
  right: initial;
  left: 0;
  transform: rotate(0deg) scale(-1, -1);
}
    <div class="thumbnails">
  <div class="thumb decor-triangle"><p>Text</p></div>
  <div class="thumb"><p>Text</p></div>
  <div class="thumb"><p>Text</p></div>
  <div class="thumb decor-triangle decor-triangle-right"><p>Text</p></div>
  <div class="thumb decor-triangle"><p>Text</p></div>
  <div class="thumb"><p>Text</p></div>
</div>

    • 0

相关问题