CSS div宽度自适应

在实际应用中,可能有这样的需求,那就是需要div根据内容进行宽度自适应。有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应,其实这是错误的,因为在默认状态下,div的宽度值是百分之百,也就是会占满整个父元素宽度。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="parent">
  <div class="children">码农教程欢迎你</div>
</div>
</body>
</html>

以上代码可以看出,默认状态下,并不能够实现我们想要的效果。下面对以上代码进行修改如下:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="parent">
  <div class="children">码农教程欢迎你</div>
</div>
</body>
</html>

以上代码实现我们想要的效果,并且各浏览器兼容性良好,主要是添加如下核心代码:

display:inline-block; 
*display:inline; 
*zoom:1;

大家可以把上面实例代码复制到这里运行一下,查看一下效果。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

子绝父相 这个子绝父相太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。 首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。 就是说, 子级
分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。 本文给大家介绍用纯CSS
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*
Iframe高度自适应是一个很头疼的问题,特别是要考虑浏览器兼容性以及跨域的情况,本文章向码农介绍完美解决Iframe高度自适应(兼容性好并且支持跨域)的方法,需要的朋友可以参考一下。
最近些项目遇到用iframe的地方,发现设置的固定高有时不能完全适应项目环境,不是高了就是不够高,在页面里看着很不爽。如何想办法到使用 iframe 自适应高度的方法,下面分享给大家。
css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用方法和实例,需要的朋友可以参考一下。