CSS 實現行內和上下自適應的幾種方法

2022-07-29 06:57:17 字數 664 閱讀 1828

在寫乙個移動端網頁,發現網頁的頭部搜尋框兩邊各有固定寬度的按鈕,搜尋框可以根據寬度的變化來改變自己的寬度,達到填充的目的,也就是一種自適應吧,下面寫寫自己嘗試的幾種方法

一 利用css3 的width:calc(100% - npx);

注意  width:calc(100% - 120px); 兩邊都有空格,不要問我為什麼會知道。。。

二 利用display:table和display:table-cell

display:table 這個屬性很少用,display:table-cell可以自適應寬度,這點倒是挺好的。

三 利用position:absolute;

利用position:absolute;不固定寬度,設定高度,然後將左右定位為預留的位置,然後就會自適應螢幕寬度了。

四 關於上下自適應

這個就是利用position:absolute;上下都定位到邊上,就會自適應了。。

實現UITabelView自適應高度的幾點注意事項

我們設定單元格高度的時候 有固定高度的情況,通過 self.tableview.rowheight 88 也可以設定datasource中 cgfloat tableview uitableview tableview heightforrowatindexpath nsindexpath inde...

使用CSS實現自適應高度和底部對齊

在實際開發中,我們遇到一種情況,需要將 的底部放乙個分頁的標籤,這樣使得布局如下 實際 主體包含兩部分內容,資料和分頁資訊,分頁資訊最好總是停靠在 主體的底部,我們以前使用的是 的valign實現,但是存在不少的問題,現在我們使用css expression實現以下功能 1 主體的位置可以在水平和垂...

圓角自適應寬度按鈕的css實現

圓角自適應寬度按鈕的css實現 有時候我們需要乙個鏈結看上去像按鈕,所以就需要用到block屬性,如果要幾個按鈕併排或者需要和其他文字混排的時候,inline block就可以很好的解決這個問題。只是不是所有人都響應了mozilla的號召把firefox公升級到了3.0。遺憾的是,firefox2不...