javascript - 有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。
本文介绍了javascript - 有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
希望得到大家的帮助~
需要实现一个这样的效果：
中间的内容可以是 React 组件，可以是文字等任意的东西，提前不知道它的宽度值。
两边的线等长，随着中间的内容增加或者减少进行改变，但是和中间的文字总是保持一定的间隔。
总结起来就是三列布局，中间内容不定宽，两边内容等宽，且可以自适应中间内容宽度的变化。
目前自己可以实现中间内容定宽的情况，但是不定宽的情况却做不出来，希望大家提供一些思路，感谢大家。
<div class="horizontalLineWithContent">
<span class="horizontalFirstAdditionalLayer"></div>
"AND"
<span class="horizontalFirstAdditionalLayer"></div>
<div>html 部分考虑到 React 无法操作伪元素，所以将伪元素换成了 span 标签
.horizontalLineWithContent {
position: relative;
margin: 1em auto;
text-align: center;
color: #eee;
.horizontalFirstAdditionalLayer, .horizontalSecondAdditionalLayer{
position: absolute;
border-top: 1px solid #eee;
top: 50%;
}
.horizontalFirstAdditionalLayer {
left: 0;
}
.horizontalSecondAdditionalLayer {
right: 0;
}
}希望大家多多提供思路，多谢各位啦~~
解决方案
有考虑and背景因素吗？
如果不考虑背景的话可以这样做：
<body style="
text-align: center;
border-top: 1px solid;
"><span style="
position: relative;
top: -10px;
background: white;
padding: 0 10px;
">and</span></body>当然这只是方法之一，其它方法还有的，我再想想再来
这篇关于javascript - 有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，两边自适应。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
