一个带有文本背景的容器,其中容器可以增长以适应最大的内容或文本背景的大小。
我得到的最接近的是使用一个带有两个内部 DIV 的 flexbox 容器,一个用于内容,一个用于文本背景。两者的 flex-basis 均为 100%,背景的一侧边距为 -100%,因此内容可以与其重叠。
此布局的问题在于背景文本中的填充来自何处并不那么明显。我希望蓝色和红色虚线相互接触,但有填充。
.test1 {
position: absolute;
left: 50px;
top: 50px;
}
.test2 {
position: absolute;
left: 500px;
top: 50px;
}
.test3 {
position: absolute;
left: 50px;
top: 250px;
}
.test4 {
position: absolute;
left: 500px;
top: 250px;
}
.test5 {
position: absolute;
left: 50px;
top: 450px;
}
.test6 {
position: absolute;
left: 500px;
top: 450px;
}
.outer {
display: flex;
min-width: 150px;
min-height: 150px;
outline: dashed 3px green;
padding: 3px;
}
.title {
background: red;
text-align: center;
}
.foreground {
flex: 1 0 50%;
display: flex;
justify-content: space-between;
align-items: center;
outline: dashed 3px blue;
}
.left {
background: rgba(255,255,0,.5);
}
.right {
background: rgba(0,255,255,.5);
text-align: right;
}
.background {
flex: 1 0 50%;
margin-right: -100%;
font-size: 30px;
outline: dashed 3px red;
display: flex;
justify-content: center;
align-items: center;
}
.background>div {
outline: dashed 3px red;
}
<div class="outer test1">
<div class="background">
<div>1 some very long text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test2">
<div class="background">
<div>2 text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test3">
<div class="background">
<div>3 some very long text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test4">
<div class="background">
<div>4 text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test5">
<div class="background">
<div>5 some very long text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCDxxxxx</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test6">
<div class="background">
<div>6 text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCDxxxxx</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
编辑
这是预期的结果:
最佳答案
如果您想让红色容器适合其父级并相应地增加尺寸,则此 div 只需要 flex: 1;
和可选的 text-align: center;
用于使文本居中。
.test1 {
position: absolute;
left: 50px;
top: 50px;
}
.test2 {
position: absolute;
left: 500px;
top: 50px;
}
.test3 {
position: absolute;
left: 50px;
top: 250px;
}
.test4 {
position: absolute;
left: 500px;
top: 250px;
}
.test5 {
position: absolute;
left: 50px;
top: 450px;
}
.test6 {
position: absolute;
left: 500px;
top: 450px;
}
.outer {
display: flex;
min-width: 150px;
min-height: 150px;
}
.title {
background: red;
text-align: center;
}
.foreground {
flex: 1 0 50%;
display: flex;
justify-content: space-between;
align-items: center;
outline: dashed 3px blue;
}
.left {
background: rgba(255,255,0,.5);
}
.right {
background: rgba(0,255,255,.5);
text-align: right;
}
.background {
flex: 1 0 50%;
margin-right: -100%;
font-size: 30px;
outline: dashed 3px red;
display: flex;
justify-content: center;
align-items: center;
}
.background>div {
outline: dashed 3px red;
flex: 1;
text-align: center;
}
<div class="outer test1">
<div class="background">
<div>1 some very long text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test2">
<div class="background">
<div>2 text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test3">
<div class="background">
<div>3 some very long text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test4">
<div class="background">
<div>4 text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test5">
<div class="background">
<div>5 some very long text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCDxxxxx</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
<div class="outer test6">
<div class="background">
<div>6 text!!!</div>
</div>
<div class="foreground">
<div class="left">
<div>A</div>
<div>AB</div>
<div>ABC</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCD</div>
<div>ABCDxxxxx</div>
</div>
<div class="right">
<div>A</div>
<div>AB</div>
</div>
</div>
</div>
关于html - 这可以仅使用 CSS 来完成吗? (没有JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38807309/