Home > Developer > Web Develop
Understand:
Tug-of-war effect in my understanding is equivalent to an object in the opposite direction two of the same size of force, coupled with the setting of Margin:auto, the equivalent of the object by two tensile force is very difficult (╯﹏╰), only if it honestly stay at the mercy of any two forces, it will be better qaq, that is, adaptive center
On the code:
Html
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <title>Tug of war effect</title>5 <MetaCharSet= "Utf-8">6 <Linkrel= "stylesheet"type= "Text/css"href= "Style.css">7 </Head>8 <Body>9 <Divclass= "Container">Ten <ul> One <Liclass= "Active"><imgsrc= "01.jpg"></Li> A <Liclass= "Left"><imgsrc= "02.jpg"></Li> - <Liclass= "Right"><imgsrc= "03.jpg"></Li> - </ul> the </Div> - </Body> - </HTML>
Css
1 * {2 padding:0;3 margin:0;4 Border:0;5}6 7 . Container{8 Background-color:#eaeaea;9 position:relative;/*relative positioning*/Ten} One . Container>ul{ A width:1500px; - Height:700px; - position:relative; the margin:0 Auto; -} - . Container>ul>li{ - width:600px; + Height:400px; - /*Hide out-of-scope content*/ + Overflow:Hidden; A position:Absolute;/*absolute Positioning (relative to the first parent element with a relative or absolute)*/ at} - . Container>ul>li.active{ - /*set the stacking position of the*/ - Z-index:2; - /*relative to two forces*/ - Top:0px; in Bottom:0px; - Right:0; to Left:0; + /*Self-adapting*/ - margin:Auto; the Height:600px; *} $ . Container>ul>li.left{Panax Notoginseng Z-index:1; - Top:0; the Bottom:0; + Left:50px; A margin:Auto; the} + . Container>ul>li.right{ - Z-index:1; $ Top:0; $ Bottom:0; - Right:50px; - margin:Auto; the} - Wuyi . Container>ul>li>img{ the position:Absolute; - /*picture content offset left 20%*/ Wu Left:-20%; - /*height relative to the parent band element*/ About Height:100%; $}
CSS layout-tug-of-war effect (Web layout using physical mechanics)
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
