CSS三栏布局——双飞翼布局

最新推荐文章于 2024-08-07 17:18:04 发布

Maanqi_1214

最新推荐文章于 2024-08-07 17:18:04 发布

阅读量129

点赞数

分类专栏：双飞翼布局文章标签： css

本文链接：https://blog.csdn.net/Maanqi_1214/article/details/114953719

版权

双飞翼布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
</head>
<style>
*{
	padding: 0;
    margin: 0;
}
  
#container {
    overflow: hidden;
}

#center {
  	float: left;
    width: 100%;
    height: 200px;
    background: blue;
}
#left {
  	float: left;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    background: yellow;
}
#right {
  	float: left;
    width: 50px;
    height: 200px;
    margin-left: -50px;
    background: pink;
}
.content {
    margin: 0 50px 0 200px;
}
</style>
 
<body>
  
  <div id="container">
    <div id="center">
      <div class="content">#center</div>
    </div>
    <div id="left">#left</div>
    <div id="right">#right</div>
  </div>
 
</body>
 
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Maanqi_1214

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三栏布局——双飞翼布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"></head><style>*{ padding: 0; margin: 0;} #container { overflow: hidden;}#center { float: left; width: 100%; height: 200px; backgro
复制链接

扫一扫