响应式网格视图css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    *{
        box-sizing:border-box;
    }
.header {
    border: 1px solid red;
    padding: 15px;
}
.menu {
     25%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.main {
     75%;
    float:left;
    padding: 15px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

等价于

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.header {
    border: 1px solid red;
    padding: 15px;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {//所有列向左浮动,间距为15px
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.col-1 { 8.33%;}
.col-2 { 16.66%;}
.col-3 { 25%;}
.col-4 { 33.33%;}
.col-5 { 41.66%;}
.col-6 { 50%;}
.col-7 { 58.33%;}
.col-8 { 66.66%;}
.col-9 { 75%;}
.col-10 { 83.33%;}
.col-11 { 91.66%;}
.col-12 { 100%;}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>
</body>
</html>
原文地址:https://www.cnblogs.com/zhengtu2015/p/5453783.html