主页 / 问题 / 1129481
Accepted
Nimaj
Asked:2020-05-22 03:26:36 +0000 UTC2020-05-22 03:26:36 +0000 UTC

每新行增加 30px 的行列布局

  • 772

一共有三行，每新增加30px。如何实施？使用 calc 功能是否可能？ 在此处输入图像描述

HTML 代码：

<div class="list">
    <div><span>Fully responsive design</span></div>
    <div><span>Hihh quality code</span></div>
    <div><span>Diffetent headers & layout</span></div>
</div>

或者每个人都必须分配一个类并设置宽度？

html

3 个回答

  1. 如果元素的嵌套不会吓到你，你可以这样做。无需为每个元素计算单独的宽度；很容易为所有行更改它，只更改.parent.

    .container {width: 300px;}

.parent {
  padding-right: 30px;
}

.line {
  padding: 5px;
  background-color: coral;
  margin-bottom: 5px;
}
    <div class="container">

<div class="parent">
  <div class="parent">
    <div class="parent">
      <div class="parent">
        <div class="parent">
          <div class="parent">
            <div class="line">Line 1</div>
          </div>
          <div class="line">Line 2</div>
        </div>
        <div class="line">Line 3</div>
      </div>
      <div class="line">Line 4</div>
    </div>
    <div class="line">Line 5</div>
  </div>
  <div class="line">Line 6</div>
</div>

</div>

    • 3
  2. Best Answer

    它可以是这样的，例如：

    .list{
  width: 500px
}
.list > div{
  background: blue;
  margin-bottom: 10px;
  padding: 10px;
  color: white;
  width: 100%;
}
.list > div:nth-child(2){
  width: calc(100% - 30px)
}
.list > div:nth-child(3){
  width: calc(100% - 60px)
}
    <div class="list">
    <div><span>Fully responsive design</span></div>
    <div><span>Hihh quality code</span></div>
    <div><span>Diffetent headers & layout</span></div>
</div>

    • 2

  3. 只需写margin-right：

    section {
  width: 50%;
  margin: auto;
  border: 1px dotted blue;
}

div {
  background: silver;
  padding: .5em;
}

div + div {
  margin-top: .5em;
}
    <section>
  <div style="margin-right:60px"><span>Fully responsive design</span></div>
  <div style="margin-right:30px"><span>Hihh quality code</span></div>
  <div style="margin-right:0px"><span>Diffetent headers & layout</span></div>
</section>

    • 2

相关问题