首頁猿問有關(guān) css...

有關(guān) css 方面的問題，三列布局，中間不定寬自動改變寬度，兩邊自適應(yīng)。

JavaScript

紅糖糍粑 2018-08-02 11:10:07

希望得到大家的幫助~需要實(shí)現(xiàn)一個這樣的效果：中間的內(nèi)容可以是 React 組件，可以是文字等任意的東西，提前不知道它的寬度值。兩邊的線等長，隨著中間的內(nèi)容增加或者減少進(jìn)行改變，但是和中間的文字總是保持一定的間隔?？偨Y(jié)起來就是三列布局，中間內(nèi)容不定寬，兩邊內(nèi)容等寬，且可以自適應(yīng)中間內(nèi)容寬度的變化。目前自己可以實(shí)現(xiàn)中間內(nèi)容定寬的情況，但是不定寬的情況卻做不出來，希望大家提供一些思路，感謝大家。<div class="horizontalLineWithContent"> <span class="horizontalFirstAdditionalLayer"></div> "AND" <span class="horizontalFirstAdditionalLayer"></div><div>html 部分考慮到 React 無法操作偽元素，所以將偽元素?fù)Q成了 span 標(biāo)簽.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; } }希望大家多多提供思路，多謝各位啦~~

查看完整描述

1 回答

青春有我

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個贊

有考慮and背景因素嗎？
如果不考慮背景的話可以這樣做：

<body style="
    text-align: center;
    border-top: 1px solid;
"><span style="
    position: relative;
    top: -10px;
    background: white;
    padding: 0 10px;
">and</span></body>

當(dāng)然這只是方法之一，其它方法還有的，我再想想再來

反對回復(fù) 2018-09-16