人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

cssの段組みについて相談させてください。

現在添付のような段組みを組みたいのですが、うまくコーディングすることができません。。

段組みは動的に吐き出すのですが
右側の名前、yyyy-mm-dd、サムネ小(顔写真)を
positionをつかってうまくできないでしょうか?

ご知見のあるかたソース、もしくはサンプルサイトを教えて頂けますと助かります。。

どうかよろしくお願いいたします。


1327643914
●拡大する

●質問者: aiueo
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Eggs
●0ポイント

こんな感じでいかがでしょう?


<style type="text/css">
<!--
.cla1 {
position: relative;
overflow: hidden;
border-style: dotted;
}
.cla2 {
position: relative;
margin: 0px 0px 0px auto;
}
.cla3 {
position: absolute;
right: 0px;
bottom: 0px;
overflow: auto;
width: 100%;
}
.cla4 {
position: absolute;
right: 100px;
bottom: 0px;
overflow: auto;
}
.img1 {
position: relative;
float: left;
border-style: dotted;
}
.img2 {
position: relative;
float: right;
border-style: dotted;
}
-->
</style>



<div class="cla1"><img class="img1" src="hoge.jpg" width="100" height="100" />
<div class="cla2">あいうえおあいうえおあいうえお</div>
<div class="cla3"><img class="img2" src="hoge.jpg" width="80" height="80" />
<div class="cla4">かきくけこ<br/>YYYY-MM-DD</div>
</div>
</div>
<div class="cla1"><img class="img1" src="hoge.jpg" width="100" height="150" />
<div class="cla2">あいうえおあいうえおあいうえお</div>
<div class="cla3"><img class="img2" src="hoge.jpg" width="80" height="80" />
<div class="cla4">かきくけこ<br/>YYYY-MM-DD</div>
</div>
</div>
<div class="cla1"><img class="img1" src="hoge.jpg" width="100" height="200" />
<div class="cla2">あいうえおあいうえおあいうえお</div>
<div class="cla3"><img class="img2" src="hoge.jpg" width="80" height="80" />
<div class="cla4">かきくけこ<br/>YYYY-MM-DD</div>
</div>
</div>


aiueoさんのコメント
ありがとうございます。確認したのですが添付のような形になっていなかったみたいです。

2 ● a-kuma3
●200ポイント ベストアンサー

やってみました。
http://jsfiddle.net/KhQyk/

ポイントは、下に配置したい要素の外側を position: relative; にして、
下に配置する要素を position: absolute; にして、bottom で位置を調整する。

position: absolute; にするので、その外側の要素の padding が効かなくなります。
その分を、その要素の bottom で位置を合わせる必要があります。


一応、コードも貼っておきます。

<style>
.block {
 width: 320px;
}
.frame {
 min-height: 120px; /* ★ */
 position: relative; /* ★ */
 border: darkblue solid 2px;
 padding: 10px;
}
.message {
 display: inline-block;
 width: 210px;
 font-size: 12pt;
 float: right;
}
.img {
 vertical-align: top;
 width: 80px;
}
.user_icon {
 width: 30px;
 float: right;
 position: relative;
}
.frame_footer {
 clear: left;
 position: absolute; /* ★ */
 bottom: 10px; /* ★ */
 right: 10px;
 text-align: right;
}
.id, .date {
 text-align: left;
}
.write_info {
 display: inline-block;
 text-align: right;
 margin-right: 2ex;
}

</style>

<body>

<div class="block">

<div class="frame">
 <div style="vertical-align: top;">
 <img src="http://www.hatena.ne.jp/users/a-/a-kuma3/profile.gif" class="img" style="height: 60px;">
 <div class="message">
 それを囲む外側を position: relative; にして、貼りつけたい要素を position: absolute; で、bottom: 0; にする。
 </div>
 </div>
 <div class="frame_footer">
 <div class="write_info">
 <div class="id">a-kuma3 さん</div>
 <div class="date">2012-01-27</div>
 </div>
 <img src="http://www.hatena.ne.jp/users/a-/a-kuma3/profile.gif" class="user_icon">
 </div>
</div>

<div class="frame">
 <div style="vertical-align: top;">
 <img src="http://www.hatena.ne.jp/users/a-/a-kuma3/profile.gif" class="img" style="">
 <div class="message">
 それを囲む外側を position: relative; にして、貼りつけたい要素を position: absolute; で、bottom: 0; にする。
 </div>
 </div>
 <div class="frame_footer">
 <div class="write_info">
 <div class="id">a-kuma3 さん</div>
 <div class="date">2012-01-27</div>
 </div>
 <img src="http://www.hatena.ne.jp/users/a-/a-kuma3/profile.gif" class="user_icon">
 </div>
</div>

<div class="frame">
 <div style="vertical-align: top;">
 <img src="http://www.hatena.ne.jp/users/a-/a-kuma3/profile.gif" class="img" style="height: 240px;">
 <div class="message">
 それを囲む外側を position: relative; にして、貼りつけたい要素を position: absolute; で、bottom: 0; にする。
 </div>
 </div>
 <div class="frame_footer">
 <div class="write_info">
 <div class="id">a-kuma3 さん</div>
 <div class="date">2012-01-27</div>
 </div>
 <img src="http://www.hatena.ne.jp/users/a-/a-kuma3/profile.gif" class="user_icon">
 </div>
</div>


</div>

# Firefox でしか、確認してません。多分、IE だとグズグズになると思います。
IE7 はダメダメでしたが、IE8 だったら OK でした。


aiueoさんのコメント
ありがとうございます。こちらを参考になんとか近い形に収めることができました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ