cssの面白いレイアウトについての解答

4605 ワード

html xml css XHTML

1.画像の不定高さ容器内の垂直水平中央
韓国人の1つのとても良い実現
最初の空白の容器などの高いピクチャ行の要素を利用して行の高さを大きくし、後続のピクチャ行の要素vertical-align:middleはこのピクチャの参照が大きい行の中線を垂直に中央にします
ここで空白の画像の高さをheight:100%に変更します.元のheight:160 pxではなく、より柔軟性があります.

<!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列は幅を固定し、もう1列は残りのスペースを埋めます.

2.1 floatによるカラムレイアウト(ネット上で流布)
一方の列Aは全ての幅を満たすため、幅100%を設定するが、他方の列Bに固定空間を与えるには、負のmarginを利用して、A列の実際の占有空間(width+margin+padding)がwidthより小さくなるようにして、B同業者floatの空間を残すとともに、A列内の要素がwidthの幅を占有し、A列の実際の占有空間を越えてB列と重なる可能性がある.したがって、A列の要素は、A列の内容とB列が分離されるように正marginまたは正paddingを設定します.

<!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できるので、親コンテナは高さに適応して2列を含むことができますが、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>

CSSのClip属性を利用して多彩な文字を作成する(Multi Colored Text)

Css3 Animation