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

HTML&CSSで質問です。
tableは使わずに、divにfloatなどをつけ、横に並べた場合、文字数によって、各divの縦幅がまちまちになります。
これの対応方法をおしえてください。
(tableやtable-cell以外の方法であれば、float以外でも構いません。)

また、ちなみに、横一列ではなく、3x3の様に縦にも並ぶ、あるタイプのため、その考慮もお願いします。

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

▽最新の回答へ

1 ● cno
●67ポイント

CSSで高さの指定を行い、テキストがその長さを超えた場合はスクロール式にした場合は
以下の様なコードになるかと思います。(幅、高さをそれぞれ100px、箱のmarginおよびpadding、borderはそれぞれ10pxとします。

<!doctype html>
<html>
 <head>
 <style type="text/css">
 div#nine{
 overflow: hidden;
 width: 480px;
 padding: 0;
 }
 div#nine > div{
 width: 100px;
 height: 100px;
 overflow: scroll;
 border: 10px solid #000;
 padding: 10px;
 margin: 10px;
 float: left;
 }
 </style>
 </head>
 <body>
 <div id="nine">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 </div>
 </body>
</html>

makocanさんのコメント
すみません。これは意味合いが違いますね。 要するにtableのように、1つのdivの縦が長くなれば、それに合わせて、他の横に並んでいるdivの高さも変えたいのです。

2 ● a-kuma3
●67ポイント

こんな感じで できます。

<style>
#product-list {
 padding: 0;
 width: 500px; /* 外側のサイズを決める */
}
.product {
 width: 32%; /* 三つ入れるとして、padding を考慮した相対値で幅を決める */
 margin: 2px;
 float: left;
}
.product:nth-child(3n+1) { /* 三つ毎に行を変える */
 clear: both;
}
</style>

<div id="product-list">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<!-- 三つ毎とか気にせずに、だーっと書いて OK -->
</div>

jsFiddle で試したのがこちら。
https://jsfiddle.net/a_kuma3/93qwf5f3/


makocanさんのコメント
これは、上手い方法だと思いますが、若干用途が違いますね。 productにbackground等の色つけると、横一列で同じ高さではなくなってしまうので table使うしか無いんですかね。。。

a-kuma3さんのコメント
これ以上は display の table 、table-cell を使うか、javascript を使ってサイズを調整するか、ということになると思います。 javascript を使う場合には、float を使うと高さを揃える要素を探すのが難しくなるので、行を意識した HTML を書くことになると思います。

3 ● syamaoka
●66ポイント

こういうことでしょうか。
ポイントは、

・.row に overflow: hidden を指定している
・.col にマイナス margin と padding を指定している

ことです。

<!doctype html>
<html>
 <head>
 <style type="text/css">
 .row {
 background-color: pink;
 width: 300px;
 min-height: 100%;
 overflow: hidden;
 }
 .col {
 float: left;
 width: 100px;
 height: 100%;
 padding-bottom: 30000px;
 margin-bottom: -30000px;
 }
 .left {
 background-color: blue;
 }
 .center {
 background-color: yellow;
 }
 .right {
 background-color: red;
 }
 </style>
 </head>
 <body>
 <div>
 <div class="row">
 <div class="col left">
 <p>a</p>
 <p>b</p>
 <p>c</p>
 <p>d</p>
 </div>
 <div class="col center">
 <p>a</p>
 </div>
 <div class="col right">
 <p>a</p>
 <p>b</p>
 </div>
 </div>
 </div>
 </body>
</html>
関連質問

●質問をもっと探す●



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