我想要创建的是一个响应式“表格”。所以如果它在浏览器上应该如下所示:
图片名称
名字图片
图片名称
但是，当你在手机屏幕(或其他小屏幕)上查看时，需要像这样:
图片 姓名 图片 姓名 等等
这就是我使用 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>有人知道怎么解决吗？ 提前致谢!
最佳答案
不确定为什么必须对行使用 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%;
}
}
关于html - 添加填充以显示 : table-header-group，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58001315/