logo标签列表

这可以只使用CSS来完成吗？（无JS）

htmlcssflexbox
3

一个文本背景的容器，其中容器可以根据内容或文本背景中最大的那个自动扩展大小。

我找到的最接近的方法是使用一个flexbox容器和两个内部DIV，一个用于内容，另一个用于文本背景。两者的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>

编辑

这将是预期的结果：

输入图像描述

1个回答
1

如果您希望红色容器适应其父容器并相应地增大，只需要为该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>

我期望蓝色的会缩小，因为黄色和青色容器之间有很多空间。我附上了预期结果的屏幕截图。谢谢。 - rraallvv
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接