tableは使わずに、divにfloatなどをつけ、横に並べた場合、文字数によって、各divの縦幅がまちまちになります。
これの対応方法をおしえてください。
(tableやtable-cell以外の方法であれば、float以外でも構いません。)
また、ちなみに、横一列ではなく、3x3の様に縦にも並ぶ、あるタイプのため、その考慮もお願いします。
No.1
124
12
67pt
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>
No.2
49342137
67pt
こんな感じで できます。
<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/
これは、上手い方法だと思いますが、若干用途が違いますね。
productにbackground等の色つけると、横一列で同じ高さではなくなってしまうので
table使うしか無いんですかね。。。
これ以上は display の table 、table-cell を使うか、javascript を使ってサイズを調整するか、ということになると思います。
javascript を使う場合には、float を使うと高さを揃える要素を探すのが難しくなるので、行を意識した HTML を書くことになると思います。
No.3
219
66pt
こういうことでしょうか。
ポイントは、
・.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>
1912
1869
1
1
1
すみません。これは意味合いが違いますね。
2015/04/17 17:32:37要するにtableのように、１つのdivの縦が長くなれば、それに合わせて、他の横に並んでいるdivの高さも変えたいのです。