DIV巢狀過程中的高度自適應問題
對於很多網站製作的新手朋友來說,學習DIV+CSS是必不可少的。站長在一些上海網站製作論壇以及QQ群裡面,還有百度問答裡面,看到很多朋友在問巢狀DIV的很多問題,比如巢狀DIV 高度自適應的問題,我們也看過很多這樣的實現方式,比如很多論壇或者百度問答說到用JS程式實現,可能對很多網站製作的新手朋友來說看起來有些費腦筋,今天說兩個最最簡單的實現方法,大家一看就知道了。
第一種:巧用底層DIV實現巢狀DIV的高度自適應
很多時候,我們在網站製作的時候,需要在一個DIV裡面嵌入子DIV,子DIV的高度往往會因為內容的增多變大,這個時候需要外面的DIV隨著子DIV的高度變化而變化。很多新手朋友在網上問父層DIV沒有被id為sub的裡層子DIV撐高,整體樣式出現嚴重的走樣效果。
所以,今天說的一個簡便的處理方法就是,我們可以在最後一個子層DIV結束之後加上一個寬度與父DIV相同的DIV,高度設為0畫素或者根據自己的需要設定一個合適高度的DIV,且該DIV不允許兩邊有浮動物件,這樣我們的網站製作就能實現外部的DIV的高度自動的適應內部的DIV的高度了。這樣完全不需要寫什麼複雜的程式。
第二種:設定外層div的overflow:auto;屬性
這種方法其實是最簡單的,我們只需要給外面的DIV設定設定一個overflow:auto;屬性就可以了。overflow 為CSS中設定當物件的內容超過其指定高度及寬度時如何管理內容的屬性。所以,如果我們是使用DW來進行網站製作的,直接設定就可以了,具體的方法是:選中外面的DIV ---進入 CSS屬性 --- 找到定位---然後設定overflow為auto就可以了。
以上的兩種方法最簡單,而且相容絕大部分的瀏覽器,這樣我們網站建設的新朋友,就解決了這個問題,基本上不需為使用JS程式碼來實現這種功能發愁了。
第三種:網頁新佈局
網頁佈局(layout)是CSS的一個重點應用。
佈局的傳統解決方案,基於盒狀模型,依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便,比如,垂直居中就不容易實現。
2009年,W3C提出了一種新的方案----Flex佈局,可以簡便、完整、響應式地實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支援,這意味著,現在就能很安全地使用這項功能。
Flex佈局將成為未來佈局的首選方案。本文介紹它的語法,下一篇文章給出常見佈局的Flex寫法。
一、Flex佈局是什麼?
Flex是Flexible Box的縮寫,意為"彈性佈局",用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex佈局。
.box{ display: flex; }
行內元素也可以使用Flex佈局。
.box{ display: inline-flex; }
Webkit核心的瀏覽器,必須加上-webkit
字首。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意,設為Flex佈局以後,子元素的float
、clear
和vertical-align
屬性將失效。
二、基本概念
採用Flex佈局的元素,稱為Flex容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為Flex專案(flex item),簡稱"專案"。
容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start
,結束位置叫做main
end
;交叉軸的開始位置叫做cross start
,結束位置叫做cross
end
。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size
,佔據的交叉軸空間叫做cross
size
。
三、容器的屬性
以下6個屬性設定在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction屬性
flex-direction
屬性決定主軸的方向(即專案的排列方向)。
.box { flex-direction: row | row-reverse | column | column-reverse; }
它可能有4個值。
row
(預設值):主軸為水平方向,起點在左端。row-reverse
:主軸為水平方向,起點在右端。column
:主軸為垂直方向,起點在上沿。column-reverse
:主軸為垂直方向,起點在下沿。
3.2 flex-wrap屬性
預設情況下,專案都排在一條線(又稱"軸線")上。flex-wrap
屬性定義,如果一條軸線排不下,如何換行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
它可能取三個值。
(1)nowrap
(預設):不換行。
(2)wrap
:換行,第一行在上方。
(3)wrap-reverse
:換行,第一行在下方。
3.3 flex-flow
flex-flow
屬性是flex-direction
屬性和flex-wrap
屬性的簡寫形式,預設值為row
nowrap
。
.box { flex-flow: <flex-direction> || <flex-wrap>; }
3.4 justify-content屬性
justify-content
屬性定義了專案在主軸上的對齊方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5個值,具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start
(預設值):左對齊flex-end
:右對齊center
: 居中space-between
:兩端對齊,專案之間的間隔都相等。space-around
:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
3.5 align-items屬性
align-items
屬性定義專案在交叉軸上如何對齊。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5個值。具體的對齊方式與交叉軸的方向有關,下面假設交叉軸從上到下。
flex-start
:交叉軸的起點對齊。flex-end
:交叉軸的終點對齊。center
:交叉軸的中點對齊。baseline
: 專案的第一行文字的基線對齊。stretch
(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
3.6 align-content屬性
align-content
屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
該屬性可能取6個值。
flex-start
:與交叉軸的起點對齊。flex-end
:與交叉軸的終點對齊。center
:與交叉軸的中點對齊。space-between
:與交叉軸兩端對齊,軸線之間的間隔平均分佈。space-around
:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。stretch
(預設值):軸線佔滿整個交叉軸。
四、專案的屬性
以下6個屬性設定在專案上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order屬性
order
屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。
.item { order: <integer>; }
4.2 flex-grow屬性
flex-grow
屬性定義專案的放大比例,預設為0
,即如果存在剩餘空間,也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有專案的flex-grow
屬性都為1,則它們將等分剩餘空間(如果有的話)。如果一個專案的flex-grow
屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。
4.3 flex-shrink屬性
flex-shrink
屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
.item { flex-shrink: <number>; /* default 1 */ }
相關推薦
DIV巢狀過程中的高度自適應問題
對於很多網站製作的新手朋友來說,學習DIV+CSS是必不可少的。站長在一些上海網站製作論壇以及QQ群裡面,還有百度問答裡面,看到很多朋友在問巢狀DIV的很多問題,比如巢狀DIV 高度自適應的問題,我們也看過很多這樣的實現方式,比如很多論壇或者百度問答說到用JS程式實現
DIV巢狀時外層無法自適應高度三種解決方案
http://developer.51cto.com/art/201009/225428.htm 這裡向大家描述一下解決DIV巢狀時外層(父層)無法自適應高度的方法,原本自己寫的CSS程式碼是沒有錯誤的,但是為什麼在新版的瀏覽器中會發現使用DIV巢狀時外層(父層)無法自
iframe雙層巢狀後,高度自適應
/** * 自適應iframe高度 * @param iParentFrameName :父框架ID * @param iframeName:框架ID */ function SetIframeSize(iParentFrameName,iframeName)
React Native 原生RN巢狀webView,並自適應高度
import React, { Component } from 'react'; import { StyleSheet, View, Dimensions, Text } from 'react-native'; const { width, height } = Dim
div裡巢狀iframe,設定iframe及div的高度自適應
1. div+iframe <div class="main"> <iframe id="contentFrame" name="contentFrame" src="url" onload="javascript:reinitIframe(
[Swift通天遁地]二、表格表單-(3)在表格中巢狀另一個表格並使Cell的高度自適應
本文將演示如何在表格中巢狀另一個表格並使Cell的高度自適應,建立更加強大的佈局效果。 在專案資料夾【DemoApp】上點選滑鼠右鍵,彈出右鍵選單。 【New File】->【Cocoa Touch Class】->【Next】-> 【Class】:CustomizeUITableVi
div巢狀ul時div的寬度和高度自適應
div中巢狀ul時div的寬度和高度隨著ul裡元素的變化而變化,下面是一個事例,可以改變li元素的內容和個數去驗證: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
如何讓高度自適應的div中的文字水平垂直居中
weight pos overflow 最大 高度 absolut abs 自己 left 1.在做數據展示的時候,因為後臺沒有數據,為了提示用戶沒有數據,自己手寫了一個div中間顯示一個“暫無數據的字樣”, 然後控制顯示和隱藏,這樣方法有兩種: 第一種:設置display
ScrollView巢狀ListView、RecyclerView,使其高度自適應
1、針對ScrollView巢狀ListView時只顯示第一個item高度的bug,可在activity裡動態修改ListView的高度(即計算每個item和分割線的高度後進行相加得到總高度),在setAdapter之後呼叫下面這個函式即可。 值得注意的是,此時ListVi
flex巢狀佈局高度自適應加滾動條
<div class="colwarp" style="display: flex; flex-direction: column; height: 100%; background-color: #bbf;justify-content:space-between;
由Dialog裡面巢狀ListView之後的高度自適應引起的ListView效能優化
廢話少說先來張bug圖填樓 前言 隨著RecyclerView的普及,ListView差不多是安卓快要淘汰的控制元件了,但是我們有時候還是會用到,基本上可以說是前些年最常用的Android控制元件之一了.拋開我們的主題,我們先來談談ListView的
ScrollView巢狀ListView或GridView等,使得其高度自適應解決方案
這類的文章有很多,寫此文的目的是為了備忘吧。ScrollView裡面巢狀ListView或GridView等,兩個View都有滾動的效果,在巢狀使用時起了衝突,一般不建議兩者套用。解決的方案有很多但是
ViewPager 巢狀多個不同高度的Fragment,ViewPager 高度自適應
問題: ViewPager 巢狀多個Fragment,但是每個Fragment高度不一致,導致高度比較小的Fragment底部留有大片空白區域。 解決方法: 參考文章 關於ViewPager高度自適應(隨著pager頁的高度改變Viewpager的高度)
父容器div內的子元素div為float時,父元素無法撐開(或高度自適應)的解決方式以及css中position和float的介紹
先簡單給出父元素無法高度自適應時的解決方案: 第一種:在父容器上設定 overflow:auto或者hidden可以讓它自動包含子元素,從而具有了實際的height值。 第二種:在子元素的最下面加上一個 空元素,並且設定clear:both,但
css中div高度自適應且固定剩餘高度由另外div內容填充
最近做個頁面設計,頭部是搜尋框以及過濾按鈕那些,而剩餘高度內容則是列表內容用來顯示過濾後的內容。在移動裝置顯示頭部內容會隨螢幕大小而改變,所以不能把高度設定死,但剩餘部高度又要顯示列表內容。 構思是頭部有一部分的高度隨著內容的變化而變化,但這頭部是固定的fie
外層div隨內層div高度自適應
1.0 高度 lang init nbsp flow -c col div高度自適應 首先說一下textarea的高度隨文字的內容自適應,用div模擬textarea。直接看代碼。其中 contenteditable="true"表示div可以編輯。。主要是設置 overf
div模擬textarea文本域輕松實現高度自適應
body post HR word-wrap overflow out 模擬 target get <style> .textarea{ width:400px; min-height:20px; max-height:300p
android imageview中 scaletype 與 寬度固定高度自適應
原文地址:https://blog.csdn.net/qq_32515625/article/details/71700080 這是scaletype的幾乎所有展示 http://blog.csdn.net/larryl2003/article/details/6919513 下面
讓裏面的div撐開外面的div,讓高度自適應
css var 浮動 count lis head style oat height <!-- 設置clearfloat樣式,讓裏面的div撐開外面的div,讓高度自適應 --> <style type="text/css"> .clear
jquery之div模擬textarea文字域輕鬆實現高度自適應
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="tex