HTML&CSSで質問です。

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

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/04/16 21:31:51
  • 終了:2015/04/23 21:35:05

回答(3件)

id:cno No.1

cno回答回数124ベストアンサー獲得回数122015/04/16 22:45:23

ポイント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>
id:makocan

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

2015/04/17 17:32:37
id:a-kuma3 No.2

a-kuma3回答回数4619ベストアンサー獲得回数19552015/04/16 22:58:52

ポイント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/

id:makocan

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

table使うしか無いんですかね。。。

2015/04/17 17:36:20
id:a-kuma3

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

2015/04/17 18:16:53
id:syamaoka No.3

syamaoka回答回数20ベストアンサー獲得回数82015/04/18 21:38:20

ポイント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>

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

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

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

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

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