1.两列布局，左侧宽度固定，右侧宽度自适应
1.1.左侧进行浮动，右侧设置margin-left
/* 1.利用浮动进行布局*/ .left { float: left; width: 200px; height: 200px; background-color: cornflowerblue; } .right { margin-left: 200px; height: 200px; background-color: bisque; } <div class="left"></div> <div class="right"></div>
立即学习“前端免费学习笔记（深入）”；
1.2.利用绝对定位来代替浮动
/* 2.利用绝对定位进行布局*/ .wrap { position: relative; } .left { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: cornflowerblue; } .right { margin-left: 200px; height: 200px; background-color: bisque; } <div class="wrap"> <div class="left"></div> <div class="right"></div> </div>
立即学习“前端免费学习笔记（深入）”；
2.1.利用浮动进行布局
/* 1.利用浮动进行布局*/ .left { margin-right: 200px; height: 200px; background-color: cornflowerblue; } .right { float: right; width: 200px; height: 200px; background-color: bisque; } <div class="right"></div> <div class="left"></div>
立即学习“前端免费学习笔记（深入）”；
注：right要写在left的前面，否则会出现如下问题。然后百度了下，终于找到了如下一段话（首先要明白浮动元素只对后面元素有影响，浮动元素本身并不浮动，只是脱离文档流，后面的元素会上移而占据浮动元素的位置。所以按你说的话，就要利用负边距把浮动元素拉高才能完成。）。
立即学习“前端免费学习笔记（深入）”；
2.2.利用绝对定位进行布局
/* 2.利用绝对定位进行布局*/ .wrap { position: relative; } .left { margin-right: 200px; height: 200px; background-color: cornflowerblue; } .right { position: absolute; top: 0; right: 0; width: 200px; height: 200px; background-color: bisque; } <div class="wrap"> <div class="left"></div> <div class="right"></div> </div>/* 1.常规实现方式*/ .left, .right { width: 50%; height: 200px; background-color: cornflowerblue; } .left { margin-left: -300px; float: left; } .right { margin-right: -300px; float: right; } .center { margin: 0 auto; width: 600px; height: 200px; background-color: bisque; } <div class="right"></div> <div class="left"></div> <div class="center"></div>
立即学习“前端免费学习笔记（深入）”；
4.1.利用浮动实现
/* 1.浮动实现方式*/ .left, .right { width: 300px; height: 200px; background-color: cornflowerblue; } .left { float: left; } .right { float: right; } .center { margin: 0 300px; height: 200px; background-color: bisque; } <div class="right"></div> <div class="left"></div> <div class="center"></div>
立即学习“前端免费学习笔记（深入）”；
4.2.利用绝对定位实现
/* 2.绝对定位方式实现*/ .left, .right { position: absolute; top: 0; width: 300px; height: 200px; background-color: cornflowerblue; } .left { left: 0; } .right { right: 0; } .center { margin: 0 300px; height: 200px; background-color: bisque; } <div class="right"></div> <div class="left"></div> <div class="center"></div><strong>5.两列，左右等高显示</strong>
.wrap { overflow: hidden; } .left, .right { margin-bottom: -10000px; padding-bottom: 10000px; } .left { background-color: cornflowerblue; } .right { float: right; width: 400px; background-color: bisque; } <div class="wrap"> <div class="right"> <p>10. 是否忘记了写DTD?</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/2304">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/175782008192275.png" alt="先见AI">
</a>
<div class="aritcle_card_info">
<a href="/ai/2304">先见AI</a>
<p>数据为基，先见未见</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="先见AI">
<span>95</span>
</div>
</div>
<a href="/ai/2304" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="先见AI">
</a>
</div>
<p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> </div> <div class="left"> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p> <p>10. 是否忘记了写DTD?</p>定width属性。另外指定元素时尽量使用em而不是px做单位。</p> </div> </div>注：以上例子均是在清除了默认样式的情况下进行的
* { margin: 0; padding: 0; color: #fff; }
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
728
