Home > Industries > Media
A three-column layout, in different sizes, into two columns, and then into a column
The code looks like this: View Code printing? <! DOCTYPE html>
Geneva
<meta charset= "Utf-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1"/>
<title>css3-media-queries-demo</title>
<style>
Body, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, Pre, form, fieldset, input, textarea, p, blockquote, TH, TD {
padding:0;
Ten margin:0;
11}
content{.
Zoom:1;
14}
content:after{.
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
21}
Leftbox,. rightbox{
Float:left;
width:20%;
height:500px;
margin:5px;
Background: #ffccf7;
Display:inline;
29-webkit-transition:width 1s ease;
30-moz-transition:width 1s ease;
31-o-transition:width 1s ease;
32-ms-transition:width 2s ease;
transition:width 1s ease;
34}
middlebox{.
Float:left;
Panax Notoginseng width:50%;
height:800px;
margin:5px;
Background: #b1fffc;
Display:inline;
42-webkit-transition:width 1s ease;
43-moz-transition:width 1s ease;
44-o-transition:width 1s ease;
45-ms-transition:width 1s ease;
transition:width 1s ease;
47}
rightbox{.
Background: #fffab1;
50}
Wuyi @media only screen and (min-width:1024px) {
content{.
width:1000px;
Margin:auto
55}
56}
@media only screen and (min-width:400px) and (max-width:1024px) {
rightbox{.
width:0;
60}
leftbox{width:30%}
middlebox{width:65%}
63}
@media only screen and (max-width:400px) {
Leftbox,. Rightbox,. middlebox{
width:98%;
height:200px;
68}
69}
</style>
72
<body>
<div class= "Content" >
<div class= "Leftbox" ></div>
<div class= "Middlebox" ></div>
<div class= "Rightbox" ></div>
</div>
</body>
Media Page Layout 2
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
