三栏式布局

最新推荐文章于 2025-03-13 12:15:16 发布

梁祖迅

最新推荐文章于 2025-03-13 12:15:16 发布

阅读量305

点赞数

本文链接：https://blog.youkuaiyun.com/gexiaopipi/article/details/70177858

版权

<!DOCTYPE HTML>
<html lang="en">

  
  
   
       <meta  charset="utf-8">
  
  <head>
    <title>san lanshi buju</title>
    <link rel="stylesheet" href="sanlan.css" type="text/css">
</head>
<body>
    <div class="all">
        
        <div class="left">
            <p>团队名称
                <img src="sanlan.jpg">
            </p>
        </div>
        
        <div class="right">
            <ul>
                <li><img src="sanlan.jpg"></li>
                <li><img src="sanlan.jpg"></li>
                <li><img src="sanlan.jpg"></li>
                <li><img src="sanlan.jpg"></li>
            </ul>
        </div>
        
        <div class="main">
            <h1>关于你们团队的介绍</h1>
                <p>关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍
                    关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍
                    关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍
                    关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍
                    关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍关于你们团队的介绍</p>
        </div>
        
    </div>
</body>
</html>

*{
    margin:0;
    padding:0;
body{
    min-width:400px;
}
}
div.all{
    overflow:hidden;
    margin:auto;
    background-color:#eee;
    border:1px solid #999;
    width:1200px;
}
div.left{
     background-color:white;
    float:left;
    width:200px;
    margin:20px;
    border:1px solid #999;
}

div.right{
    background-color:white;
    float:right;
    border:1px solid #999;
    width:200px;
    margin-top:20px;
    margin-right:20px;
    margin-bottom:40px;
}
div.main{
    background-color:white;
    max-width:80%;
    margin-left:400px;
    margin-right:300px;
    margin-top:30px;
    border:2px solid #999;
    min-width:300px;
}