cssdiv宽度根据文字多少自适应（div + css问题:怎样让div自动适应文字宽度）

你不给宽度他自然就自动了。。。还有上面你要加上文档声明《!doctype html》《html》《head》 《style type=“text/css“》body{text-align:center;}.contents{ background-color:red;}《/style》《/head》《body》《div class=“contents“》最小宽度《/div》《/body》《/html》

《!doctype html》《html》《head》《meta charset=“utf-8“》《title》2D变换《/title》《style》.wrap{  width:800px;  border:1px solid green;  padding:10px;}.div{  display:inline-block;  border:1px solid red;  margin-right:10px;}《/style》《/head》《body》《div class=“wrap“》《div class=“div“》    第一个div块儿    《/div》    《div class=“div“》    第一个div块儿第一个div块第一个div块    《/div》    《div class=“div“》    第一个div块儿第一个div块    《/div》《/div》《/body》《/html》

显示效果如下图：

不知道是不是你想要的结果，如果不是请贴上图来继续追问。

css自适应宽度有2种方式： 1.是通过百分比来控制宽度； 2.可以通过块状元素自动占满父级的宽度的特性来实现PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。

div的内容岁内容变化就好比P标签一样，只要不给div设置宽度就行了；如《div style=“width:500px;height:auto“》 《div style=“width:auto;height:auto“》 宽度随内容变化，外围div好比浏览器的宽度，当里面div内容超过500px的时候自动换行， 《/div》《/div》

第一种：《div style=“border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap“》最小宽度《/div》第二种：《div style=“border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap“》最小宽度《/div》2种方法，你看着用

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》《html xmlns=“http://www.w3.org/1999/xhtml“》 《head》 《meta http-equiv=“Content-Type“ content=“text/html; “ /》 《meta name=“author“ content=“Chomo“ /》 《title》根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶《/title》 《style type=“text/css“》 html { height:100%;} body { height:100%; text-align:center;} .centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:200px; padding:10px; border:1px solid #f60; background:#fc0;} .hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; margin-top:0; vertical-align:middle; background-color: #CC6699;} 《/style》 《/head》 《body》 《div class=“centerDiv“》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 蓝色理想《br/》 《/div》《div class=“hiddenDiv“》《/div》 《div style=““》《/div》 《/body》《/html》

1、首选看一下html代码：

html代码：

《div id=“left“》《div class=“inner“》this is left sidebar content《/div》《/div》《div id=“main“》《div class=“inner“》this is main content《/div》《/div》《div id=“right“》《div class=“inner“》this is right siderbar content《/div》《/div》

这种方法是借助于负的margin来实现的，首先在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来。

2、css样式写法如下：

#left,#right {float: left;margin: 0 0 0 -271px;width: 50%;}#main {width: 540px;float: left;background: green;}

.inner {padding: 20px;}

#left .inner,#right .inner {margin: 0 0 0 271px;background: orange;}3、具体效果如下：

您好，这样：加个属性：white-space:nowrap;在CSS文件里这么定义a{white-space:nowrap; }这样所有《a》包括的内容都不会换行。

width:auto就可以，或者display：inline-block改为行内块

一般，我们在写DIV时，一把都是规定宽度固定高度自适应，也就是说只给它添加width属性即可。高度如果代码规范它会自动扩高。