首页 > 网站 > WEB开发 > 正文

div自适应宽度

2024-04-27 14:33:55
字体:
来源:转载
供稿:网友

div自适应宽度

对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏div:

<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;">这是中栏,且自适应宽度</div>

效果如下:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表