有关css有趣布局的解答

最新推荐文章于 2024-08-26 08:04:31 发布

iteye_4865

最新推荐文章于 2024-08-26 08:04:31 发布

阅读量78

点赞数

分类专栏： xhtml / css 文章标签： CSS XHTML HTML XML

xhtml / css 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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>