資訊專欄INFORMATION COLUMN
摘要：偽元素的值擠壓主體元素解決主體是兩個標(biāo)簽，需要再其左側(cè)添加一個豎線，很常見的需求目標(biāo)前提條件右側(cè)的文字個數(shù)不固定問題需要讓元素為文字個數(shù)不固定時，整個元素的寬度是，根據(jù)文字的內(nèi)容來算，此時使用偽元素時，如果偽元素占據(jù)的寬度過大，會導(dǎo)致文字被
偽元素的margin值擠壓主體元素解決
主體是兩個p標(biāo)簽，需要再其左側(cè)添加一個豎線，很常見的需求目標(biāo) 前提條件
1. 右側(cè)的文字個數(shù)不固定問題
1. 需要讓before元素為`float:left`； 2. 文字個數(shù)不固定時，整個元素的寬度是auto，根據(jù)文字的內(nèi)容來算，此時使用 :before偽元素時，如果偽元素占據(jù)的寬度過大，會導(dǎo)致文字被擠下去
.demo:before{
float: left;
height: 67px;
content: "";
border-right: solid 3px $primary;
border-left: solid 2px $primary;
margin-right: 10px;
}
解決
將 margin-right: 10px; 改為margin-left: -10px; 使之不占據(jù)主體的空間
jsfiddle
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117007.html
摘要：布局描述表示對頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級設(shè)置屬性為子級設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對齊方式的 布局 描述 表示對頁面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級元素（text-a...
摘要：布局描述表示對頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級設(shè)置屬性為子級設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對齊方式的 布局 描述 表示對頁面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級元素（text-a...
摘要：雙飛翼布局是對圣杯布局的優(yōu)化，先實現(xiàn)中間最重要的身體部分，再實現(xiàn)翅膀，所以叫雙飛翼布局。參考資料跟這些特性相互疊加后會怎么樣經(jīng)典布局之雙飛翼布局 ‘display’、’position’ 和 ‘float’ 的相互關(guān)系 showImg(https://segmentfault.com/img/bVECeu?w=720&h=540); 圣杯布局和雙飛翼 什么是圣杯布局和雙飛翼布局？ 圣杯...
摘要：以來說，就是在觸發(fā)頁面滾動條時候，會擠壓掉的空間，那我們就可以從不同角度考慮去解決了。 引言 頁面滾動條造成寬度減小的場景很常見了，由于div塊級元素的流動性，其寬度默認(rèn)為100%的body寬度，但是當(dāng)容器的高度超過視口寬度時候，頁面就會出現(xiàn)滾動條，這個滾動條的寬度就會擠壓body的可用寬度，也就是會擠壓我們的容器的寬度，造成頁面晃動的現(xiàn)象，很不友好，下面就來探討下如何解決這個滾動條的...
閱讀 1594·2021-09-02 15:41
閱讀 1001·2021-09-02 15:11
閱讀 1280·2021-07-28 00:15
閱讀 2311·2019-08-30 15:55
閱讀 1147·2019-08-30 15:54
閱讀 1696·2019-08-30 15:54
閱讀 2978·2019-08-30 14:02
閱讀 2526·2019-08-29 16:57
