Question

CSS的百分比布局如何解决Padding,margin,border问题

比如：布局如下
<style>
ul,li,body{ margin:0; padding:0;}
ul li{ list-style-type:none; float:left; width:183px; height:246px;}
ul li a{ display:block; position:relative; z-index:1; width:100%; height:100%;}
ul li a:hover div{ display:block; border:4px solid red; z-index:2;}
ul li div{ position:absolute; left:0; top:0; width:173px; height:236px;}
img{ border:none}
</style>
<ul>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
</ul>

如上布局DIV为红框，如何用百分比的方法解决，而不是定死高死宽！

Answer 1

改为双层样式，即外层控制宽度、高度，内层控制border样式、margin样式；举例如下：
<div class="wrap">
<div class="inner">
这里是内容了
</div>
</div>
<style>
.wrap{width:100%;}
.inner{border:1px solid red;}
</style>

能明白这种制作思路吗？就是分离出宽度控制的box

追问

.inner的高度怎么自适应....

追答

宽高由wrap层控制，div默认的height是auto的，即自适应的。。。。

Answer 2

代码让人看得费解；另外li里面不宜嵌套div
具体问题请您详细说；可以的话我可以帮助你
另外，padding margin border一般来说是定值，试想下如果你用百分比，如果碰到一个宽屏的显示器那么中间的间隔会有多大；网页将会处于不可控的状态

Answer 3

不知道你想问什么。