有关css有趣布局的解答

yiminghe · 发表于 2013-2-7 16:21:33

1.图片在不定高度容器内的垂直水平居中

韩国人的一个很好实现

利用开头一个空白的容器等高的图片行内元素撑大行高，后续的图片行内元素 vertical-align:middle则该图片参考撑大的行中线垂直居中

我这里修改空白图片高度为 height:100% ,而不是原来的 height:160px ，更具灵活性

<!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; charset=GB2312"><title>Vertical Middle</title><style>.itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;}.blank{width:0;height:100%;}.itm img{vertical-align:middle;}</style></head><body><div style="" class="itm"><img src="blank.gif" class="blank"><a href=""><img src="m060616.jpg"></a></div></body></html>
blank.gif

m060616.jpg

但是为什么 blank 图片也必须 vertical -align:middle 我也没搞清楚 ???

2.两列布局，一列固定宽度，另外一列填充剩下空间

2.1 可以用float实现列布局(网上流传)

因为其中一列A要填充所有宽度，所以设定宽度100%，但是要给另外一列B提供固定空间，可以利用负margin，使得A列实际占用空间（width+margin+padding）小于 width ，从而留给B 同行 float 的空间，同时A列内元素占用width的宽度，可能会越过A列的实际占用空间而和B列重合，所以A列中的元素要设置正margin或正padding 使得A列中的内容和B列分开。

<!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" lang="en" xml:lang="en"><head><style type="text/css"> #main { margin: 30px 0 10px; text-align: center;} #left_part { float: left; margin-right: -350px; width: 100%;} #in_left_part { margin-right: 350px; height: 300px; padding-top: 150px;} #right_part { float: right; background:#292928; width: 350px; height: 300px; line-height: 300px;}</style></head><body> <div id="main"> <div id="left_part"> <div id="in_left_part"> 左边宽度为自适应, 利用负边距: <br /> #left_part { margin-right: -350px;}<br /> &nbsp;&nbsp;&nbsp;&nbsp;#in_left_part { margin-right: 350px;} </div> </div> <div id="right_part"> 右边固定宽度, 宽度为350px; </div> <br style="clear:both;" /> </div> </body></html>

2.2 自己想了一个

负边距感觉很别扭，很少用负边距吧，我觉得用正边距也可以啊，只要自扩展宽度那列给另外一列留出空间好了，这是另外一列要想和上一列并排，那就绝对定位到右上边好了。

问题：
后来想了下，这样会有问题的，因为 float 的话可以 clear ，使得父容器可以自适应高度包含两列，而 absolute 的话父容器就无论如何都无法知道绝对定位那列的高度，也无法包含，当 absolute 那列很高(比普通那列高)时，则父容器边框，背景等会无法覆盖那列。

<!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" lang="en" xml:lang="en"><head><style type="text/css"> #main { margin: 30px 0 10px; text-align: center; position:relative;} #left_part { margin-right: 350px; } #right_part {background:#292928; width: 350px; height: 300px; position:absolute;right:0;top:0;}</style></head><body> <div id="main"> <div id="left_part"> 左边宽度为自适应, <br /> 利用正边距右留空 <br /> &nbsp;&nbsp;&nbsp;&nbsp; </div> <div id="right_part"> 右边固定宽度,绝对定位, 宽度为350px; </div> </div> </body></html>

		自动登录	找回密码
密码			立即注册