如何在下一行的整个宽度上显示单个网格项目的标题？
How can I show the caption of a single grid item over the full width of the next row?
在一个网页中，我想显示几个项目。当用户单击这些项目中的任何一个时，会显示一些带有解释的文本。
图解如下（每个彩色方块为一张照片）
初始状态：
点击后：（示例中点击了Item2）
可以看出，我希望带有解释的文本占据容器的所有宽度，并且第二行图像向下移动（以及所有其他内容，包括页脚）。我还希望此架构能够响应，即在移动设备上，而不是连续四项，只有一个。
我已经处理这个问题几天了，我的一个方法是使用 position: absolute; 设置四个 divs（对于第一行元素）一个叠一个.每个 div 都包含照片（位于 left: 0%、left: 25%、left: 50% 和 left: 75% 位置）和相应的文本。但是我的问题是position: absolute div的内容不占space，所以点击后无法'move down'剩下的内容。
另一种方法是设置 div 以在 四个可点击图像之后显示文本 。我在这种情况下的问题是移动设备：在移动设备上，我显然希望文本显示在相应图像下方，而不是四张图像之外。
有人知道从哪里开始吗？当然不是完整的代码，只是基本的 idea/approach.
这是一个想法：
对于每一行，您将有容器 div 用于框，容器 div 用于文本内容。每个框都与一个文本部分相关（通过 ID、class 或其他）。最初，所有的文本部分都是隐藏的，点击框显示相应的文本部分。
不需要绝对位置，您可以使用 Bootstrap（或其他一些 UI 框架）来实现响应。
HTML:
<div class="main">
<div class="row boxes-container">
<div class="box col-3" data-box="1"></div>
<div class="box col-3" data-box="2"></div>
<div class="box col-3" data-box="3"></div>
<div class="box col-3" data-box="4"></div>
</div>
<div class="row text-container">
<div class="text-section col-12" data-text="1">
Lorem Ipsum
</div>
<div class="text-section col-12" data-text="2">
Lorem Ipsum
</div>
<div class="text-section col-12" data-text="3">
Lorem Ipsum
</div>
<div class="text-section col-12" data-text="4">
Lorem Ipsum
</div>
</div>
</div>
您可以使用环绕弹性行自动定位您的图形。并且将标题绝对定位在容器的左侧。在 selected 元素上设置足够的底部边距。我使用 :hover here to select。但是您可以使用真实的 class 并根据需要将其设置为 javascript。
.container {
counter-reset: fig-count 0;
display: flex;
flex-wrap: wrap;
}
figure {
counter-increment: fig-count 1;
}
figure:after {
content: "Item " counter(fig-count);
display: block;
text-align: center;
font-size: smaller;
}
figcaption:before {
content: "Item " counter(fig-count) ": ";
font-size: smaller;
}
figcaption {
align-self: flex-start;
width: 100%;
position: absolute;
left: 0;
height: 100px;
display: none;
padding: 3ex;
}
figure:hover {
margin-bottom: 100px;
}
figure:hover figcaption {
display: block;
}
<div class="container">
<figure>
<img src="https://picsum.photos/seed/1/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/2/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/3/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/4/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/5/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/6/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/7/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/8/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
在一个网页中，我想显示几个项目。当用户单击这些项目中的任何一个时，会显示一些带有解释的文本。 图解如下（每个彩色方块为一张照片）
初始状态：
点击后：（示例中点击了Item2）
可以看出，我希望带有解释的文本占据容器的所有宽度，并且第二行图像向下移动（以及所有其他内容，包括页脚）。我还希望此架构能够响应，即在移动设备上，而不是连续四项，只有一个。
我已经处理这个问题几天了，我的一个方法是使用 position: absolute; 设置四个 divs（对于第一行元素）一个叠一个.每个 div 都包含照片（位于 left: 0%、left: 25%、left: 50% 和 left: 75% 位置）和相应的文本。但是我的问题是position: absolute div的内容不占space，所以点击后无法'move down'剩下的内容。
另一种方法是设置 div 以在 四个可点击图像之后显示文本 。我在这种情况下的问题是移动设备：在移动设备上，我显然希望文本显示在相应图像下方，而不是四张图像之外。
有人知道从哪里开始吗？当然不是完整的代码，只是基本的 idea/approach.
这是一个想法：
对于每一行，您将有容器 div 用于框，容器 div 用于文本内容。每个框都与一个文本部分相关（通过 ID、class 或其他）。最初，所有的文本部分都是隐藏的，点击框显示相应的文本部分。
不需要绝对位置，您可以使用 Bootstrap（或其他一些 UI 框架）来实现响应。
HTML:
<div class="main">
<div class="row boxes-container">
<div class="box col-3" data-box="1"></div>
<div class="box col-3" data-box="2"></div>
<div class="box col-3" data-box="3"></div>
<div class="box col-3" data-box="4"></div>
</div>
<div class="row text-container">
<div class="text-section col-12" data-text="1">
Lorem Ipsum
</div>
<div class="text-section col-12" data-text="2">
Lorem Ipsum
</div>
<div class="text-section col-12" data-text="3">
Lorem Ipsum
</div>
<div class="text-section col-12" data-text="4">
Lorem Ipsum
</div>
</div>
</div>
您可以使用环绕弹性行自动定位您的图形。并且将标题绝对定位在容器的左侧。在 selected 元素上设置足够的底部边距。我使用 :hover here to select。但是您可以使用真实的 class 并根据需要将其设置为 javascript。
.container {
counter-reset: fig-count 0;
display: flex;
flex-wrap: wrap;
}
figure {
counter-increment: fig-count 1;
}
figure:after {
content: "Item " counter(fig-count);
display: block;
text-align: center;
font-size: smaller;
}
figcaption:before {
content: "Item " counter(fig-count) ": ";
font-size: smaller;
}
figcaption {
align-self: flex-start;
width: 100%;
position: absolute;
left: 0;
height: 100px;
display: none;
padding: 3ex;
}
figure:hover {
margin-bottom: 100px;
}
figure:hover figcaption {
display: block;
}
<div class="container">
<figure>
<img src="https://picsum.photos/seed/1/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/2/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/3/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/4/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/5/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/6/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/7/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/seed/8/200">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>