HTML&CSSで質問です｡ tableは使わずに､divにfloatなどをつけ､横に並べた場合､文字数によって､各divの縦幅がまちまちになります｡これの対応方法をおしえてください｡…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

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

また､ちなみに､横一列ではなく､3x3の様に縦にも並ぶ､あるﾀｲﾌﾟのため､その考慮もお願いします｡

●質問者: makocan
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

▽1 ● passivedokechi
●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>