三个div横排，中间的div自适应宽度

最新推荐文章于 2022-08-23 18:16:15 发布

原创最新推荐文章于 2022-08-23 18:16:15 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

布局之道专栏收录该内容

21 篇文章

订阅专栏

本文通过一个实例展示了如何使用HTML和CSS实现元素的精确布局。具体包括相对定位、绝对定位以及层级显示效果，适合前端开发初学者实践。

HTML：

<div class="container">
  <div class="section-a">section-a</div> 
  <div class="section-b">section-b</div> 
  <div class="section-c">section-c</div> 
</div>

CSS ：

.container{position: relative; overflow: hidden;width: 100%; height: 180px;}
.section-a,
.section-b,
.section-c{position: absolute;top: 0; width: 180px;height: 180px; background-color: #ececec;text-align: center;}
.section-a{left: 0;z-index: 2;}
.section-b{position: relative; width: auto;margin: 0 180px;background-color: green;}
.section-c{right: 0;z-index: 2;}