ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1908-01-04フッタのものを横に並べる(途中)

要素にidをつける

floatを


まず、htmlは

<div class="module">
 <div class="module1">
  <hatena〜〜はてなモジュールのタグ>
 </div>
 <div class="module2">
  <hatena〜〜はてなモジュールのタグ>
 </div>
 <div class="module3">
  <hatena〜〜はてなモジュールのタグ>
 </div>
 <div class="module4">
  <hatena〜〜はてなモジュールのタグ>
 </div>
</div>

のような構造にしておきます。それで

div.module {
position: relative;
width:100%;
}
div.module1 {
position: absolute;
width:22%;
margin:0 78% 0 0;
}
div.module2 {
position: absolute;
width:22%;
margin:0 52% 0 26%;
}
div.module3 {
position: absolute;
width:22%;
margin:0 26% 0 52%;
}
div.module4 {
position: absolute;
width:22%;
margin:0 0 0 78%;
}

のように指定して、モジュールの数などによってwidthとmarginを調整します。上のは足してうまく横幅が100%になるようにしてみましたが、%指定はやめてしまって、widthはpx指定、marginもmargin-leftだけpxで指定するほうが楽かもしれません。

 | 

ホームページ制作