左侧宽度固定，右侧宽度自适应-----两种布局样式

最新推荐文章于 2021-04-03 17:33:59 发布

转载最新推荐文章于 2021-04-03 17:33:59 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zwp06/p/7477446.html

本文介绍了两种不同的网页布局方法：一种使用浮动元素配合外边距，另一种利用绝对定位实现。这两种方法均实现了左侧固定宽度的内容区域及右侧相应留白的设计。

下面是两种布局方式

html

<div class="t1">
       <div class="one">1</div>
       <div class="two">2</div>
</div>

css1样式布局1

.one{
　　float:left;
　　width:300px;
　　height:200px;
　　background-color: pink;
}
.two{
　　margin-left: 300px;
　　height:200px;
　　background-color: #f40;
}

css2样式布局2

.one{
       position:absolute;
       width:300px;
       height:200px;
       background-color: pink;
}
.two{
       margin-left: 300px;
       height:200px;
       background-color: #f40;
}

转载于:https://www.cnblogs.com/zwp06/p/7477446.html