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

添付した画像のようなレイアウトをtableタグを使わないで実現したいと思っています。参考になるサイト、もしくはHTML,CSSのコーディング例を教えてください。

1415687645
●拡大する

●質問者: mkusume
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pogpi
●10ポイント

4ブロック全体をdivタグで、各々のブロックをolタグ、タイトルと文を各々liタグでくくればできそうですね。


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

ひとつの記事が、こんな感じだとして、

<div class="unit">
 <h3>タイトル</h3>
 <div class="contents">
 <p>
 記事。<br>
 ああああああああ...
 </p>
 </div>
</div>

スタイルが、こんな感じ。

H3 {
 border: 1px solid black;
 margin: 6px 3px;
}
.unit {
 width: 20em; /* ここは、お好みの幅で */
 float: left;
 border: 1px solid black;
 padding: 0;
}
.contents {
 border: 1px solid black;
 margin: 6px 3px;
}

これだと、ウィンドウの幅で、次の行に移る感じです。
決まった数でずらしたいなら、例えば、こんなのを追加。

.unit:nth-child(3n+2) {
 clear: both;
}

JSFiddle でやってみたのが、これです。
http://jsfiddle.net/jjz2wb35/1/embedded/result/

ソースは、右上の「Edit in JSFiddle」をクリックすると、見られます。


mkusumeさんのコメント
詳細な回答ありがとうございます。確認しています。

a-kuma3さんのコメント
気が回りませんでしたが、.content に高さと overflow の指定があった方が良いですね。 >|css| .content { ... height: 10em; /* お好みの高さで */ overflow-y: hidden; } ||<
関連質問

●質問をもっと探す●



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