横向文字瀑布流，不错的一个东西纯html+css

最新推荐文章于 2024-07-25 15:56:00 发布

langyu1021

最新推荐文章于 2024-07-25 15:56:00 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：瀑布流

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

效果图如下