多行多栏布局

最新推荐文章于 2022-10-13 11:27:10 发布

不见蝴蝶不见君。

最新推荐文章于 2022-10-13 11:27:10 发布

阅读量183

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/gabby____/article/details/83958644

版权

HTML&CSS 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

我的版本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        #wrapper{

            width:960px; margin:0 auto; overflow:hidden; border:1px solid #6b5678
        }
        header{background:black;
            color:white;}
        nav{
            background:pink;
        }


        section#three  article {
            float:left;
            width:320px;
            padding:10px 0;
            background:#fff;
            border-top:4px solid blue;
        }

        section#three article .inner {
            margin:10px 20px;
            padding:5px;
            background:yellow;

            word-break: break-all;
        }

        section#four  article {
            float:left;
            width:240px;
            padding:10px 0;
            background:#fff;
            border-top:4px solid blue;
        }
        section#four article .inner {
            margin:10px 20px;
            padding:5px;
            background:#fff;
           border:2px solid;;

        }


section#four article:nth-child(3){ /*注意后面不加.inner!!!!!!!!!!!!!!!!!!!!!!!!!!*/
    background:lightblue;
}

        section#four article:nth-child(1) .inner {
            border-color:#d7dd6f;
        }
        section#four article:nth-child(2) .inner {
            border-color:#f6dec5;

        }
        section#four article:nth-child(3) .inner {
            border-color:#d1d8e4;
        }


footer {
	clear:both;
	text-align:center;
	background:#6b5678;
	}

    </style>
</head>
<body>
<div id="wrapper">
    <header><h1>Full-width content</h1></header>
    <nav><p>navigation menue go there</p></nav>
    <section id="branding">
        <img src="yoga3.png">
    </section>

    <section id="three">
        <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>
        <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>
        <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>

    </section>

<section id="four">
    <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>
    <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>
    <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>
    <article><div class="inner"><p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p></div></article>
</section>
    <footer><p>this is the footer</p></footer>
</div>
</body>
</html>

参考版本


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>Stylin' with CSS - Figure 5.14 A Multi-Row, Multi-Column Layout</title>
<link href='http://fonts.googleapis.com/css?family=Metrophobic|Droid+Sans:400,700|Droid+Sans+Mono|Open+Sans:400italic,700italic,800italic,300italic,600italic,400,300,600,700,800|Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>

<style>
* {margin:0; padding:0;}
body {
	font-family:helvetica, arial, sans-serif; 
	}
#wrapper {
	width:960px; margin:0 auto; overflow:hidden; border:1px solid #6b5678;
	}
header {
	background:#a292ac;
	padding:3px 10px;
	}
header h1 {
	font-family:Metrophobic;
	font-size:2.5em;
	letter-spacing:-.05em;
	color:#fff;
	}
nav{
	background:#f7923a;
	padding:3px 10px;
	}
section#branding img {
	display:block;
	}
/* FEATURE AREA */	
section#feature_area  article {
	float:left;
	width:320px;
	padding:10px 0;
	background:#fff;
	border-top:4px solid #f7be84;
	}
section#feature_area article .inner {
	margin:10px 20px;
	padding:5px;
	background:#fff;
	border:5px solid;
	}
section#feature_area article:nth-child(2) {
	background:#e5e8ed;
	}
section#feature_area article:nth-child(1) .inner {
	border-color:#d7dd6f;
	}
section#feature_area article:nth-child(2) .inner {
	border-color:#f6dec5;
	}
section#feature_area article:nth-child(3) .inner {
	border-color:#d1d8e4;
	}
section#feature_area article p {
	font-family:'Open Sans';
	font-weight:300;
	font-size:1.15em;
	line-height:1em;
	text-align:center;
	color:#616161;
	}
/* PROMO AREA */	
#promo_area  article {
	float:left;
	width:240px;
	padding:10px 0;
	border-top:4px solid #f7be84;
	background:#fff;
	}
#promo_area article .inner {
	margin:0 20px;
	padding:10px;
	background:#e5e8ed;
	}
#promo_area article p {
	font-family:'Open Sans Condensed';
	font-weight:300;
	font-size:1em;
	line-height:1.5em;
	color:#616161;
	}
footer {
	clear:both;
	text-align:center;
	background:#6b5678;
	}
footer p {
	font-family:'Open Sans';
	font-weight:600;
	font-size:.7em;
	letter-spacing:-.05em;
	color:#fff;
	}
footer a {
	font-family:'Open Sans';
	font-weight:700italic;
	font-size:1em;
	color:#f7be84;
	text-decoration:none;
	}
</style>
</head>

<body>
	<div id="wrapper">
        <header>
            <h1>Full-width content</h1>
        </header>
        <nav>
        	<p>Navigation menus go here</p>
        </nav>
        <section id="branding">
            <img src="images/grand_canyon.jpg" alt="Grand Canyon Sunset" />
        </section><!--end branding area-->
        
        <section id="feature_area">
            <article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p>
                </div>
            </article>
            
            <article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p>
                </div>
            </article>
            
            <article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor.</p>
				</div>
            </article>
        
        </section><!--end feature_area-->
        
        <section id="promo_area">
            <article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet.</p>
                </div>
            </article>
            
            <article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet.</p>
                </div>
            </article>
            
            <article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet.</p>
                </div>
            </article>
        	<article>
                <div class="inner">
                    <p>Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet.</p>
                </div>
            </article>
            
        </section><!--end promo_area-->
    <footer>
      <p>A CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin&rsquo;
            with CSS, Third Edition</em></a> by Charles Wyke-Smith</p>    </footer>
   </div>
    
    <!-- OK to remove the code between here and </body> -->
	<!-- Please note that the watermarked image/images in this code example is/are provided only for the purpose of displaying the code example in your browser. Licensing rights to this image/images is/are not conveyed to you. If you would like to purchase licensing rights for the images in this book, please visit the following url: --> 
	<div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;">
    <p>To purchase the stock images in this book and other great stock images, go to <a href="http://www.bigstockphoto.com/?refid=PEECNmwgKb">bigstockphoto.com</a></p>
    <p>A code example from <em>Stylin&rsquo; with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p>
    </div>
    
</body>
</html>

注意

1、wrapper里的width和margin一定一定要记得设置；

2、img的display：block;

3、根据盒子宽度=960/盒子数量

4、footer记得加clearboth

不见蝴蝶不见君。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多行多栏布局

我的版本&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0}
复制链接

扫一扫

专栏目录