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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/11/11 15:34:05
  • 終了:2014/11/17 10:42:50

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4365ベストアンサー獲得回数18012014/11/11 16:45:51

ポイント150pt

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

<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」をクリックすると、見られます。

id:mkusume

詳細な回答ありがとうございます。確認しています。

2014/11/11 16:52:10
id:a-kuma3

気が回りませんでしたが、.content に高さと overflow の指定があった方が良いですね。

.content {
    ...
    height: 10em;    /* お好みの高さで */
    overflow-y: hidden;
}
2014/11/11 17:09:39

その他の回答(1件)

id:pogpi No.1

pogpi回答回数356ベストアンサー獲得回数462014/11/11 16:29:35

ポイント10pt

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

id:a-kuma3 No.2

a-kuma3回答回数4365ベストアンサー獲得回数18012014/11/11 16:45:51ここでベストアンサー

ポイント150pt

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

<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」をクリックすると、見られます。

id:mkusume

詳細な回答ありがとうございます。確認しています。

2014/11/11 16:52:10
id:a-kuma3

気が回りませんでしたが、.content に高さと overflow の指定があった方が良いですね。

.content {
    ...
    height: 10em;    /* お好みの高さで */
    overflow-y: hidden;
}
2014/11/11 17:09:39

コメントはまだありません

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません