猿问

关于div的布局问题

已知HTML结构如下,在不考虑低版本浏览器兼容性的情况下,你可以用哪些方法来实现这个三列布局:左右两列定宽100像素,中间宽度自适应,三列之间没有间距。

<div class="parent">

        <div class="left">左列</div>

        <div class="center">中间列</div>

        <div class="right">右列</div>

</div>


MarryWithI
浏览 1515回答 2
2回答

上头

<style type="text/css">   /* css reset */   html, body, div {margin: 0;padding: 0;}   html, body {width: 100%;height: 100%; overflow: hidden;}   .parent{position: relative;height: 100%;}      /* 主要代码 */   .left{position: absolute;left: 0;top: 0;width: 100px;height: 100%;background: #f00;}   .center{width: auto;height: 100%;margin: 0 100px;background: #0f0;}   .right{position: absolute;right: 0;top: 0;width: 100px;height: 100%;background: #00f;}    </style>很高兴解答你的问题,我一般解决的方法是:1、外层DIV(div.parent)设置相对定位2、左右两个DIV设置绝对定位3、中间DIV设置宽度为自动,左右外边距设置成左右DIV的宽度!!如果有更方便的方法 麻烦告诉我一下~~~ thx
随时随地看视频慕课网APP
我要回答