ホームページ > 記事 > ウェブフロントエンド > CSS div宽度自适应
代码实例如下:
<code class="language-html"> <meta charset="utf-8"> <meta name="author" content="http://www.manongjc.com/"> <title>码农教程</title> <style type="text/css"> .parent{ width:400px; height:400px; border:1px solid red; } .children{ border:1px solid blue; height:50px; } </style> <div class="parent"> <div class="children">码农教程欢迎你</div> </div> </code>
以上代码可以看出,默认状态下,并不能够实现我们想要的效果。下面对以上代码进行修改如下:
<code class="language-html"> <meta charset="utf-8"> <meta name="author" content="http://www.manongjc.com/"> <title>码农教程</title> <style type="text/css"> .parent{ width:400px; height:400px; border:1px solid red; } .children{ border:1px solid blue; height:50px; display:inline-block; *display:inline; *zoom:1; } </style> <div class="parent"> <div class="children">码农教程欢迎你</div> </div> </code>
以上代码实现我们想要的效果,并且各浏览器兼容性良好,主要是添加如下核心代码:
<code class="language-css">display:inline-block; *display:inline; *zoom:1;</code>
大家可以把上面实例代码复制到这里运行一下,查看一下效果。