1.HTML中,表格根据内容自适应宽度
<span style="color:#CC0000;"> td
{
white-space: nowrap;
} </span>
亲试,可以
2.如何实现网页使用所有的屏幕宽度
原则:不使用绝对宽度由于网页会根据屏幕宽度调整布局,
所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。
具体说,CSS代码不能指定像素宽度:width:xxx px;
只能指定百分比宽度:width: xx%;或者width:auto;
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
3.具体做法
这几行的语句都针对整个页面,即body标签或者最外层的那个div区域。
margin: 10px auto;
这一行保证了网页在任何分辨率下,都会居中。
min-width: 780px;
max-width: 1260px;
这二行规定了网页的最小和最大宽度。注意,IE6不支持这二行,即它们在IE6中是无效的。
width:expression_r(document.body.clientWidth <782? "780px" : document.body.clientWidth > 1262?"1260px" : "auto");
这一行是针对IE6的解决方法。它采用了CSS表达式,也可以通过javascript实现。
另外,如果想让内层的各个区块也自动伸缩,它们的宽度可以采用百分比的形式,比如:
#div-left{
width:50%;
}
width:50%;
}
4.流动布局(fluid grid)
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现
资料:http://www.cnblogs.com/ricky_li/p/3806256.html
https://segmentfault.com/a/1190000003996026?_ea=451661
5.别人的demo
.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
.in-bl{display: inline-block;}
.f{width: 33.333%;height: 100px;background-color: #ab1256;}
.s{width: 33.333%;height: 100px;}
.t{width: 33.333%;height: 100px;background-color:#192873;}
.in{margin:0 auto;px;width: 95%;background-color:#958727;height: 100%}
<div class="g-bd">
<div class="f in-bl">
<div class="in">
</div>
</div><div class="s in-bl"><!--这里把结束标签与下一个标签合并了,正式工作时会给后端工程师添麻烦,不建议使用-->
<div class="in">
</div>
</div><div class="t in-bl">
<div class="in">
</div>
</div>
</div>
效果: