標籤：定位 round back img 中間 ack 知識 div width
三個div中間自適應，兩側固定大小
<html><head><title>三列布局</title><style type="text/css">body{margin:0;padding:0;text-align:center}/*三列的配置樣式*//*position:absolute定位*/.left2{width:200px;height:500px;background:#f0f;position:absolute;left:0;top:0}.middle{height:500px;background:#f00;margin:0 310px 0 210px}.right2{width:300px;height:500px;background:#ff0;position:absolute;right:0;top:0}</style></head><body> <div class="left2">200px</div> <div class="middle">ssssssssssssssssssss 三列的配置樣式，兩側固定像素，採用定位的方式</div> <div class="right2">300px</div></body></html>
效果如下：
關鍵知識點：
利用position:absolute定位，中間div不設定寬度，中間div的margin值取決於兩側div的寬度
慕課筆記利用css進行布局【三列布局】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
