<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*以下爲設置li自動橫向排列的樣式*/
#nav
{
/*width: 80%;*/
margin: 0 auto;
/*border: 2px solid #00CED1;*/
}
#nav li{margin-right:5px;}
ul,li /*這是關鍵，去掉ul li默認的margin padding 值*/
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul /*這是關鍵*/
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li
{
border: 1px solid;
width: 100px; /*每個元素的初始化寬度*/
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
flex:auto; /*這是關鍵*/
}
/*以下爲設置多欄div自動橫向排列的樣式*/
.boxes /*這是關鍵*/
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box
{
border: 1px solid #999;
border-radius: 10px;
flex: auto;/*這是關鍵*/
margin: 5px;
padding: 10px;
width: 100px;/*每個元素的初始化寬度,這是關鍵*/
}
.box1
{
flex:2;/*設置匹配元素所佔寬度爲平均值的2倍，如果不設置，所有欄等寬*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>AAAAAAAA</li>
<li>BBBBBB</li>
<li>CCCSC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFF</li>
<li>BBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFSSSSSSSSSSSSSF</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEESSSSSSE</li>
<li>FFFF</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDDSSSSS</li>
<li>EEEE</li>
<li>FFFF</li>
<li>CCSSSSSCC</li>
</ul>
</div>
<div class="boxes">
<div class="box box1">
<h2>Don't excessively interpret South China Sea drill</h2>
<p>"Holding sea drills is a common practice for navies with various countries. The annual, regular drill by the Chinese navy aims to test the troops' real combat abilities, boost their maneuverability, search and rescue power and the abilities to fulfil diversified military missions," said spokesperson Liang Yang on Saturday. </p>
</div>
<div class="box box2">
<h2>Putin, Blatter voice mutual support at World Cup</h2>
<p>FIFA's President Sepp Blatter shakes hands with Russia's President Vladimir Putin (R) during the preliminary draw for the 2018 FIFA World Cup at Konstantin Palace in St. Petersburg, Russia July 25, 2015.</p>
</div>
<div class="box box3">
<h2>Passenger detained for creating chaos on flight</h2>
<p>A passenger attempted to damage facilities on Shenzhen Airlines flight ZH 9648, which departed from Taizhou City of east China's Zhejiang Province, when it was landing in Guangzhou Baiyun International Airport at around 1 a.m. on Sunday, according to the airport. </p>
</div>
<div class="box box1">
<h2>Don't excessively interpret South China Sea drill</h2>
<p>"Holding sea drills is a common practice for navies with various countries. The annual, regular drill by the Chinese navy aims to test the troops' real combat abilities, boost their maneuverability, search and rescue power and the abilities to fulfil diversified military missions," said spokesperson Liang Yang on Saturday. </p>
</div>
<div class="box box2">
<h2>Putin, Blatter voice mutual support at World Cup</h2>
<p>FIFA's President Sepp Blatter shakes hands with Russia's President Vladimir Putin (R) during the preliminary draw for the 2018 FIFA World Cup at Konstantin Palace in St. Petersburg, Russia July 25, 2015.</p>
</div>
</div>
</body>
</html>
效果圖如下
