id:kuso47
ポイントあり200ptベストアンサーあり
インターネットウェブ制作

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


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

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

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

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

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2012/01/28 23:21:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ポイント200pt

やってみました。
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 でした。

id:kuso47

ありがとうございます。こちらを参考になんとか近い形に収めることができました。

2012/01/28 23:19:01

その他の回答（1件）

id:Eggs No.1

回答回数7ベストアンサー獲得回数2

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


<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>

id:kuso47

ありがとうございます。確認したのですが添付のような形になっていなかったみたいです。

2012/01/28 23:20:49
id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント200pt

やってみました。
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 でした。

id:kuso47

ありがとうございます。こちらを参考になんとか近い形に収めることができました。

2012/01/28 23:19:01

コメント（2件)

  • id:Cherenkov
    Cherenkov 2012/01/28 03:37:25
    htmlだけでも提示したほうが適切な回答が得られるのでは？
  • id:kuso47
    aiueo 2012/01/28 23:20:05
    添付画像があるのでそれをみてお願いできればと思っていました。
    htmlであればdivのボックスだけになるので意味がないです。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ