→つーか,黄金パターンってのが本当に作りにくい.いろんな所でレイアウトに苦労しているのがよく分かった.下のパターンも可変幅には対応していないし…
- 特徴
- 幅の調整だけで良い.但し可変幅には未対応.
dd要素を可変幅にするパターンもある.(float:rightを殺してmargin-leftを設定する)
絶賛混乱中 - dt-dd要素の高さは気にしなくて良い.勝手に上辺が揃う.
高さが揃うだけなので,背景を挿入すると空白が入ってしまう.
(必要に応じheightを設定すればよいか.) - 真ん中のborderを重ねているので,styleがdashed,dottedについては上手く行かない.
- 必ずdt-ddを交互に配置すること.さもないと位置がずれてしまう.
要素を連続させてもhtml5のシンタックス上は問題ないのだけれど…
素直に要素の中身を複数行に分けて下さい.
#list{
font-size:0.8em;
width:400px;
border-top:solid 1px black;
border-bottom:solid 2px black;
margin:0;
}
#list>dt,#list>dd{
padding:0;
margin:0;
border-top:solid 1px black;
}
#list>dt{
width:139px;/*borderの分縮める*/
float:left;
clear:both;
text-align:right;
font-weight:bold;
padding-right:10px;
border-right:solid 1px black;
}
#list>dd{
width:240px;
float:right;
padding-left:10px;
border-left:solid 1px black;
margin-left:-1px;/*borderの分左にずらす…borderを重ねる*/
}
/*clear fix*/
#list:after{
display:block;
clear:both;
content:".";
color:transparent;
height:0;
width:0;
}
0 件のコメント:
コメントを投稿