添加填充以显示：table-header-group

Question

我想创建的是响应式 "table"。因此，如果它在浏览器上应该如下所示：

图片名称

名字图片

图片名称

但是，当你在phone屏幕（或其他小屏幕）上观看时，它需要像这样：

图片姓名图片姓名等等

这就是为什么我使用 display:table-footer-group;（或 table-header-group）来切换列的顺序。这很好用，所以很好。但是，所有填充然后都消失了，我不知道如何阅读它。我在互联网上发现 <thead>s 没有填充，但我现在还能如何添加填充？因为如果你运行下面的片段，图片太靠近文字了。

.column {
  box-sizing: border-box;
  vertical-align: middle;
  display: table-cell;
}

.left {
  width: 30%;
  padding: 10px;
  padding-left: 40px;
  padding-top: 5%;
}

.left2 {
  width: 70%;
  padding: 10px;
  padding-left: 40px;
}

.right {
  width: 70%;
  padding: 10px;
  padding-right: 40px;
}

.right2 {
  width: 30%;
  padding: 10px;
  padding-right: 40px;
  padding-top: 5%;
}

.row {
  display: table;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

img.team {
  border-radius: 50%;
  display: block;
  width: 100%;
  height: auto;
}

#box {
  border: 1px solid #BFBFBF;
}

.centerjustify {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: justify;
}

@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  img.team {
    border-radius: 50%;
    display: block;
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .left {
    display: table-header-group;
  }
  .left2 {
    display: table-footer-group;
  }
  .right2 {
    display: table-header-group;
  }
  .right {
    display: table-footer-group;
  }
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="centerjustify">
    <h2>Team Members</h2><br>
    <div id="box">
      <div class="row">
        <div class="column left">
          <img class="team"
            src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">

        </div>
        <div class="column right">
          <h3>test</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Donec quam felis,
            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
            quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
            arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
            Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
            tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
            enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
            imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
            ultricies nisi. Nam eget dui.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="column left2">
          <h3 style="text-align: right;">test</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Donec quam felis,
            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
            quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
            arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
            Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
            tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
            enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
            imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
            ultricies nisi. Nam eget dui.
          </p>
        </div>
        <div class="column right2">
          <img class="team"
            src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">
        </div>
      </div>
    </div>
  </div>

</body>

</html>

有谁知道如何解决这个问题？提前致谢！

Answer 1

不确定为什么必须对行使用 display:table。如果您使用 flex，则很容易更改 div 的顺序。在响应方面也做得更好。Please have a look at the fiddle

<div class="centerjustify">
        <h2>Team Members</h2><br>
        <div id="box">
            <div class="row">
                <div class="column left">
                    <img class="team" src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">

                </div>
                <div class="column right">
                    <h3>test</h3>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
                        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
                </div>
            </div>

            <div class="row row--2">
                <div class="column left">
                    <h3 style="text-align: right;">test</h3>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
                        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
                </div>
                <div class="column right">
                    <img class="team" src="https://www.birchgrovedental.co.uk/wp-content/uploads/2016/01/empty-person.jpg">
                </div>
            </div>
        </div>
    </div>

*, ：：后，：：前 { 框大小：边框框； }

.centerjustify {
    border: 1px solid #eee;
    padding: 15px;
}

.centerjustify h2 {
    text-align: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.column {
    padding: 0 15px;
    justify-content: center;
    align-items: center;
}

.left {
    flex: 0 0 30%;
    max-width: 30%;
}

.right {
    flex: 0 0 70%;
    max-width: 70%;
}

.row--2 .left {
    flex: 0 0 70%;
    max-width: 70%;
}

.row--2 .right {
    flex: 0 0 30%;
    max-width: 30%;
}

.team {
    border-radius: 50%;
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .left,
    .right,
    .row--2 .right,
    .row--2 .left {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row--2 .right {
        order: 1;
    }
    .row--2 .left {
        order: 2;
    }
    .right,
    .left .row--2 .right,
    .row--2 .left {
        width: 100%;
    }
}

Answer 2

不幸的是； padding' 不适用于 table-header-group 和 table-footer-group，因此当您访问移动视图时，它们将被忽略。

如果需要，您可以在这里阅读更多相关信息：https://www.w3.org/TR/CSS2/box.html#propdef-padding

我建议将填充放入 row class 例如

.row {
  display: table;
  padding: 10px;
 }

然后您可以按照自己的方式设置样式。

如果您想在媒体查询中保留 table-header-group 和 table-footer-group，则不能将填充保留在 .left、.left2、.right 或.right2。希望对您有所帮助:)

Answer 3

尝试通过媒体查询仅更改对象在该行中的位置。不要忘记视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 .row--2 .left {
float: left;
flex: 0 0 70%;
max-width: 70%;
   }

.row--2 .right {
 float: right;
flex: 0 0 30%;
max-width: 30%;
}

 @media only screen and (max-width: 600px) {
 .row--2 .left {
  float: right;
  flex: 0 0 70%;
  max-width: 70%;
  }

 .row--2 .right {
  float: left;
  flex: 0 0 30%; 
  max-width: 30%;
   }
   }
   </style>

添加填充以显示：table-header-group

Add padding to display: table-header-group

html

css

html-table

margin

padding