Question

请看下面的图片

我现在很尴尬地打算做的是减小最后一项的背景颜色范围，使其与另一侧相等。摆弄之后，如果不弄乱列与行的其余部分的对齐方式，我就做不到。请注意，我正在尝试这样做，而不要求使用pixel（px）。

这是我的代码

HTML

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>

  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>

  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>

  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>

CSS

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 45vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  background-color: grey;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}

链接到Codepen https://codepen.io/anon/pen/KxmJeM

我尝试更改最后一行中flex项的宽度，但是我没有找到合适的组合并摸索右侧填充物的方法，但这还是行不通的。

谢谢您的帮助

Answer 1

您可以尝试以下方法。这有点hack，但这是您需要解决的问题：

body {
  background-color: purple;
  color: #fff;
}

.container {
  margin-left: 10vw;
  margin-top: 5vw;
}

.row {
  display: flex;
  margin-top: 4vh;
  width: 42vw;
}

.row > div {
  width: 12vw;
}

.row > div:not(:first-child) {
  text-align: center;
}

.container > div:last-child {
  position: relative;
  border-radius: 100px;
  padding-left: 2vw;
  margin-left: -2vw;
}
.container > div:last-child:before {
  content: "";
  display: block;
  position: absolute;
  left: 1vw;
  right: 3vw;
  background: grey;
  height: 100%;
  border-radius: 100px;
  z-index: -1;
}

<div class="container">
  <div class="row title">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
    <div>Column 4</div>
  </div>
  
  <div class="row item-1">
    <div>Sample Title 1</div>
    <div>1</div>
    <div>10</div>
    <div>100</div>
  </div>
  
  <div class="row item-1">
    <div>Column 2</div>
    <div>2</div>
    <div>20</div>
    <div>200</div>
  </div>
  
  <div class="row item-1">
    <div>Column 3</div>
    <div>3</div>
    <div>30</div>
    <div>300</div>
  </div>
</div>

Answer 2

在CSS中添加此行可能会起作用

.container > div >div:last-child {
  width: 100px; 
 }

如何在不影响弹性项目元素对齐的情况下减小最后一行的背景颜色宽度？

2 个答案: