html - 这可以仅使用 CSS 来完成吗？ (没有JS)

标签 html css flexbox

一个带有文本背景的容器，其中容器可以增长以适应最大的内容或文本背景的大小。

我得到的最接近的是使用一个带有两个内部 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>

编辑

这是预期的结果:

enter image description here

最佳答案

如果您想让红色容器适合其父级并相应地增加尺寸，则此 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/

上一篇：javascript - 添加 Transition 正在更改 Jquery 设置的位置

下一篇：javascript - 如何在莫里斯线图中的线点上显示 y 轴值

相关文章：

javascript - 流过当前页面的页面

javascript - 将 "next"和 "previous"按钮添加到动态灯箱画廊

javascript - jQuery动画让页面跳转到顶部

css - 我的 div 背景图片没有显示

css - flex-basis和width有什么区别？

javascript - 如何从一个选定元素中提取多个属性？

jquery - 如何停止 jQuery 动画插件？必须有更好的方法来做到这一点

html - 如何设置列表样式，使其看起来像一个具有不同行高的表格？

html - 向居中的 div 添加超过 100% 的宽度，div 仅向右扩展

css - 调整列表以遵循自然流程

©2024 IT工具网  联系我们