CSS之双飞翼布局

最新推荐文章于 2024-06-01 23:21:16 发布

不再闪亮的星星

最新推荐文章于 2024-06-01 23:21:16 发布

阅读量268

点赞数

分类专栏： CSS 文章标签： css 布局

本文链接：https://blog.csdn.net/q821901733/article/details/77981037

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>双飞翼布局</title>
<style>

*{
    margin:0;
    padding:0;
}
.left p, .right p{
    width:200px;
    word-break:break-all;
}
.container{
    min-width:600px;
    font-size:30px;
    text-align: center;
}
.colnmn{
    min-height:300px;
    float:left;
}
.middle{
    width:100%;
    background-color:red;
}
.main{
    margin: 0 200px 0 200px;
}
.left{
    width:200px;
    background-color:blue;
    margin-left:-100%;
}
.right{
    width:200px;
    margin-left:-200px;
    background-color:yellow;
}
</style>
</head>
<body>
  <div class="container">
    <div class="middle colnmn">
        <div class="main  colnmn"><p>mainmainmainmainmainma
inmainmainmainmainmainmainm
ainmainmainmainmainmainmain
mainmainmainmainmainmainmainmain</p></div>
    </div>
    <div class="left colnmn"><p>leftleftleftleftl
eftleftle
ftleftleftleftleftleftleftle
ftleftleftleftleftleftleftleftlef
tleftleftleftleftleftle
ftleftleftleftleft</p></div>
    <div class="right colnmn"><p>rightrightrightrightr
ightrightrightrightrightrightri
ghtrightrightrightrightrightrightrightrightrig
htrightrightrightrightrightrightright</p></div>
  </div>
</body>
</html>

CSS之 双飞翼布局

CSS之双飞翼布局