Home > Developer > Web Develop
REF:
Cameron D.-HTML5, JavaScript and JQuery (Programmer to Programmer)-2015
<1> CSS Responsive Box
Keywords: display:inline-block;
Html:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <style>. Box{Height:200px;width:200px;Display:Inline-block; } </style></Head><Body><Divclass= "box"style= "Background:red"></Div><DivID= "Middlebox"class= "box"style= "Background:green"></Div><DivID= "Thirdbox"class= "box"style= "Background:blue"></Div><DivID= "Lastbox"class= "box"style= "Background:yellow"></Div></Body></HTML>View Code
If you want to move the Green cube 50px, the blue to the right to push 50px, in this static layout is not possible. Try Position:relative first.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <style>. Box{Height:200px;width:200px;Display:Inline-block; }#middleBox{position:relative; Left:50px; } </style></Head><Body><Divclass= "box"style= "Background:red"></Div><DivID= "Middlebox"class= "box"style= "Background:green"></Div><DivID= "Thirdbox"class= "box"style= "Background:blue"></Div><DivID= "Lastbox"class= "box"style= "Background:yellow"></Div></Body></HTML>View Code
The position is set to relative, meaning it is based on the current position and then moves.
Position set to Absolute:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <style>. Box{Height:200px;width:200px;Display:Inline-block; }#middleBox{position:Absolute; Left:150px;Top:150px; } </style></Head><Body><Divclass= "box"style= "Background:red"></Div><DivID= "Middlebox"class= "box"style= "Background:green"></Div><DivID= "Thirdbox"class= "box"style= "Background:blue"></Div><DivID= "Fourthbox"class= "box"style= "Background:yellow"></Div><DivID= "Lastbox"class= "box"style= "Background:black"></Div></Body></HTML>View Code
To put Green into the following write: Z-index:-1;
Web from getting started to giving up <8>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
