其實看到這個問題,心裡已經默默把代碼已經碼好了~,不就想下面這樣嘛:
嗯,是的,我們日常確實基本上就是用的這種方式,也沒啥問題呀~,來個背景色定下位就歐拉歐拉的了。
不過,因為一次問題需要,發現還是有需要多瞭解下的。
來,請看,這個需求是這樣子的,實現這樣子的效果(可以先構思下實現代碼,看下思路是不是差不多的呢?)
可以看到,這個線後面有背景圖,隨著螢幕尺寸漸寬時,會蓋到背景圖上,縮小時,則不會蓋在背景圖上,這就不能使用我們平常的填充背景色的寫法了,只能另尋他路(想到有什麼好的方法實現了嗎?)
所以這個問題是: 因螢幕的伸展收縮會導致內容區所能容納的內容不一,從而導致高度不一,各個元素也是隨著螢幕時高時底,背景色的用法無法生效,有何好的解決辦法?
當然,你有可能會說這是特例,可以直接,固然這種方式可以,但是,有很多這樣的區塊,難道就全部都直接嗎?肯定不行啦~,能懶就懶,如能找到一勞永逸的辦法肯定比直接,結果發現弄完發現文案有問題,要改字就蛋疼了。
方法
好了,開始想辦法解決上面的問題了。
先從 float下手,兩條線各浮動在兩側,其實我們可以理解為常見的網頁三欄布局,可是問題是,不能定寬度呀,定了還怎麼去自適應呢?所以這條pass
既然 float不行了,那想想別的,這回就用 position吧~開頭的用法也是這種,不過是有背景色的而已,這回我們不許用背景色,看如何處理這個問題。
首先,基本結構:
Headling
我們可以用偽類 :before、 :after來產生一些無關緊要的東西,不過為了能讓大家看的清楚些,直接用標籤了,
這是改進後的結構:
Headling
接著給樣式(答案就在裡面噢):
.title { position: relative; z-index: 2; font-size: 16px; line-height: 24px; text-align: center; color: #999; overflow: hidden; }.title .caption { position: relative; display: inline-block; }.title .caption .line { position: absolute; top: 11px; width: 600px; height: 1px; background-color: #ddd; }.title .caption .line-l { right: 100%; margin-right: 15px; }.title .caption .line-r { left: 100%; margin-left: 15px; }
看了上面的樣式有沒看出些端倪呢?解釋下這個實現細節:
我們可以將 .line的寬度設的超長, overflow掉即可,這樣就可以做到自適應了,下面提個小問題:
用以上的方法,解決這個線的問題~