文本不会填充列中的容器
Text won't fill the container in a column
我一直在尝试各种列技术,我喜欢这个。我计划在它们下面再放一张图片并居中。一旦选择,我就会翻转图像。我的问题是背面的文本 (.flip-item-desc) 继承了容器 (#top div) 的 50% 宽度。我不知道如何让文字 div 填充图像的背面。
#top div, #bottom div{
background-color: aqua;
text-align: center;
margin: 1% auto;
width: 50%;
height: auto;
}
.flip-item-desc{
font-family: sans-serif;
font-weight: bold;
color: white;
text-align: center;
font-size: 80%;
line-height: 1.237;
background: rgba(0,0,0,0.5);
width: 96%;
height: auto;
margin: 2% 2%;
padding: 2%;
position: absolute;
top:0;
left: 0;
overflow: hidden;
}
我在此处复制并粘贴了带有托管图像的代码:https://jsfiddle.net/digi57/ojLtu049/1/
我在你的 CSS 代码中添加了几行 -
.flip-item-desc {
min-width: 96%;
}
.back {
overflow: hidden;
}
这里是 fiddle - https://jsfiddle.net/ojLtu049/2/
我一直在尝试各种列技术,我喜欢这个。我计划在它们下面再放一张图片并居中。一旦选择,我就会翻转图像。我的问题是背面的文本 (.flip-item-desc) 继承了容器 (#top div) 的 50% 宽度。我不知道如何让文字 div 填充图像的背面。
#top div, #bottom div{
background-color: aqua;
text-align: center;
margin: 1% auto;
width: 50%;
height: auto;
}
.flip-item-desc{
font-family: sans-serif;
font-weight: bold;
color: white;
text-align: center;
font-size: 80%;
line-height: 1.237;
background: rgba(0,0,0,0.5);
width: 96%;
height: auto;
margin: 2% 2%;
padding: 2%;
position: absolute;
top:0;
left: 0;
overflow: hidden;
}
我在此处复制并粘贴了带有托管图像的代码:https://jsfiddle.net/digi57/ojLtu049/1/
我在你的 CSS 代码中添加了几行 -
.flip-item-desc {
min-width: 96%;
}
.back {
overflow: hidden;
}
这里是 fiddle - https://jsfiddle.net/ojLtu049/2/